Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 2 content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Create a Simple Angular 2 Component

2:10 Angular 2 lesson by

The simplest way to create a new component is again to use the Angular CLI. The Angular CLI can quickly generate components for you to use inside your modules and your templates. This lesson walks through using the Angular CLI to generate an Angular 2 Component then using that Component in your application.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Once you have an App Component set up, you can now add additional Components. This video walks you through creating a simple component and adding it to you App Component through the Directives Array.

Avatar
Martin

Hi John. @View decorator is optional as from version 39. I think it's better to use just only 4 angular decorators @Component, @Directive, @Pipe, @Injectable.

Much simpler to explain to a newcomer imo.
What do you think?

and btw, THANK YOU for the free lessons!

In reply to egghead.io
Avatar
Joel

Yup! That will be the first update. It is much easier to remember where to put config without @View

In reply to Martin
Avatar
EBIA

Why are you writing angular2 twice ? 'angular2/angular2' ?

Avatar
Ruben

It seems like some stuff has changed in the meantime with later releases of Angular 2 and that's probably the reason I'm walking into a problem getting this to work.
I'm just seeing a blank screen after loading.

My app component is called angular2-fundamentals-app and looks like this:

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'angular2-fundamentals-app',
  template: `
    <div>
        <app-simple-form></app-simple-form>
    </div>
  `,
  styleUrls: ['angular2-fundamentals.component.css']
})
export class Angular2FundamentalsAppComponent {
  title = `Let's get started!`;
}

The simple form component looks like this:

import { Component, OnInit } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-simple-form',
  template: `
    <p>
      simple-form Works!
    </p>
  `,
  styles: []
})
export class SimpleFormComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

I don't see any errors in the console and when I change up the app component to just display some text it works. It just won't render the simple form component.

Any ideas?

Avatar

I had the same. I fixed by getting the latest Release version of angular-cli.

Check the version of angular-cli you are running by typing

ng --version

if seeing something like v0.0..., you need to reinstall by following instructions in https://github.com/angular/angular-cli#updating-angular-cli.

I didn't bother reinstalling the npm modules in the project, I started from scratch again.

In reply to Ruben
Avatar
Ruben

Thanks mate, that fixed it for me as well. After updating I had to recreate the project, but that did solve the issue I had.

Currently running v1.0.0-beta.20-4 of ng-cli and before it was 0.0.39 I believe.

In reply to
Avatar
Danny

Same here. 10x for sharing the solution, but I am trying to install the new version of angular-cli and seems it doesn't update the version I already have 0.1.0 :-/

Update and Solution:

If you have trouble update angular-cli, you probably will need first to update your npm.
Follow this:

  1. npm cache clean
  2. npm uninstall -g angular-cli
  3. npm install npm@latest -g
  4. npm install -g angular-cli

Hope it helps!

In reply to Ruben
Avatar
Cameron

Ruben's step was essential, the file configuration was different for me after I updated npm. However, when I set up the framework there were different files than in the video; I also had an app.component.css and an app.component.html file in the app folder. In order to get the special-form.component.ts to function I had to place the app-special-form call in the app.component.html file. Is this correct or is there another way to do this?

In reply to Danny

With the server running, I'm going to go ahead and open another terminal tab. In this same Angular2 fundamentals directory, I'm going to run ng generate component. The component I want to generate is called Simple Form, and I want to --inline-template and --inline-style. The inline-style flag and the inline-template flag will make it easier for me to show in a single file what's going on.

terminal

$ ng generate component simple-form --inline-template --inline-style

You can actually write this command. The way I'm going to do it is you can write it much shorter by saying ng, g for generate, c for component, and name of the component, so simple-form -it -is. This is the exact same as what we wrote before, just in a much shorter form.

terminal

$ ng g c simple-form -it -is

I'll hit enter. This has generated two files. This component file and the component.spec. Let's look at this component.

In my project, in src/app/ there's a simple-form directory and that has a simple-form.component inside of it. I'll open that up. You can see we have a selector of app-simple-form.

simple-form.component.ts

@Component({
  selector: 'app-simple-form',
  template: `
    <p>
      simple-form Works!
    </p>
  `,
  styles:[]
})
export class SiompleFormComponent implements ngOnInit {
  constructor() { }
  ngOnInit(){
  }
}

In my AppComponent, in my template I'm just going to create a div and then inside of here say <app-simple-form> to create my component.

app.component.ts

@Component({
  selector: 'app-root',
  template: `<div>

<app-simple-form></app-simple-form> // simple-form Works!

</div>`
})
export class AppComponent {
  title = `Let's get started!`;
}

I'll hit save. Once the browser refreshes you'll see that its simple-form works. That's coming from this template inside of my app-simple-form component. You'll remember that I've named this simple-form this app- is coming from my configuration and Angular CLI-json. Look for the prefix.

This is just to ensure there's at least some prefix or name space for your project to avoid conflicts with other projects. You can name this to whatever you want.

If you look at the selectors from my simple-form.component, I have app-simple-form. In my selector and my app.component I have app-root, which is defined inside of my index.html file.

index.html

<body>
  <app-root>Loading...</app-root>
</body>

You'll see <app-root> right here. If you open the Chrome dev tools, you'll see that same hierarchy of app-root, app-simple-form, and the content inside of each template.

Component Hierarchy

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?