What is metadata - amresh087/newronaRepos GitHub Wiki

  1. What is metadata?

    Metadata is used to decorate a class so that it can configure the expected behavior of the class. The metadata is represented by decorators
    1. Class decorators, e.g. @Component and @NgModule 
      import { NgModule, Component } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<div>Class decorator</div>',
})
export class MyComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class MyModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}
    2. Property decorators Used for properties inside classes, e.g. @Input and @Output 
      import { Component, Input } from '@angular/core';

@Component({
    selector: 'my-component',
    template: '<div>Property decorator</div>'
})

export class MyComponent {
    @Input()
    title: string;
}
    3. Method decorators Used for methods inside classes, e.g. @HostListener 
      import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'my-component',
    template: '<div>Method decorator</div>'
})
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}
    4. Parameter decorators Used for parameters inside class constructors, e.g. @Inject, @Optional 
      import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';

@Component({
    selector: 'my-component',
    template: '<div>Parameter decorator</div>'
})
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}
⚠️ **GitHub.com Fallback** ⚠️