Component 101

Before add Components to our app. Let's talk about Component.

A Component is fundamental block of an Angular 2 application.

A basic Component looks like this:

@Component({
  selector: 'my-app',
  template: `
    <p>Hello World!</p>
  `
})
export class AppComponent {
}

A Component includes two parts:

• Decorator function (ES7 feature), @Component()
• Class, class AppComponent

Inside of Decorator function, {...} is a Metadata object.

A Metadata object includes

• CSS selecter, my-app
• HTML template, <p>Hello World!</p>

Sometimes, it also includes CSS styles, so it looks like this:

@Component({
  selector: 'my-app',
  template: `
    <p>Hello World!</p>,
  `
  styles: [`
    p { color: blue; }
  `]
})
export class AppComponent {
}

Note we write template and styles in the ts file. You can use separate files in Angular 2 like:

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  `
})
export class AppComponent {
}

app.component.html

<p>Hello World!</p>

app.component.css

p { color: blue; }

In the tutorial, we will write template and styles in the ts file.