CODEWITHSUNDEEP
typescriptangular
Hardipsinh Jadeja
Hardipsinh Jadeja

Reputation: 1297

What is connection between AppComponent and @Component in AngularJs 2?

File app.component.ts in Example : https://angular.io/resources/live-examples/toh-1/ts/plnkr.html is as below :

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

export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

Now, we set the value of title in AppComponent and it is shown in the template of @Component. So, want to know that how it is possible ?

Upvotes: 5

Views: 2194

Answers (2)

Thierry Templier
Thierry Templier

Reputation: 202156

As Günter said it's a decorator. An additional thing is that the decorator automatically set some metadata on the associated class with the Reflect Metadata lbrary using Reflect.defineMetadata. The metadata corresponds to what you set as parameter of the decorator (of type ComponentMetadata).

When the component is used, Angular2 will look for such annotation to find out how to use / configure the component.

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657238

@Component() is a decorator and is applied to the class, member or variable directly following the decorator. Therefore because the @Component() decorator is immediately before the class AppComponent() it is applied to this class.

The expressions in template: '...' are evaluated in the scope of the class they are applied. title therefore refers to the title field in AppComponent

Upvotes: 3

Related Questions