Defining the Metadata

A class becomes an Angular Component if when we give component metadata. We define component metadata with the angular component function. In typescript, we attach that function to the class as a decorator.

Decorator
A function that adds metadata to a class, its member or its method arguments. It is a Javascript language feature that is implemented in Typescript. It is:
+ Prefixed with an '@'
+ Angular provides built in decorators

Sample Code
@Component({
  selector: 'pm-root',
  template: `
  <div>
    <h1>{{pageTitle}}</h1>
    <div>My First Component</div>
  </div>
  `
})
export class AppComponent {
    pageTitle: string = 'Acme Product Management';
}

where,
'@Component' is component decorator
'pm-root' is directive name used in HTML
all codes inside 'template' is view layout
'{{pageTitle}}' is binding

Share this

Related Posts