Angular Decorator

The decorator is a design pattern in the Angular. It has a core concept and used to develop a project in the Angular. every decorator starts with @. there are mainly 4 types of decorators.

1) Class Decorator
2) Property Decorator
3) Method Decorator
4) Parameter Decorator

1) Class Decorators:- the class decorators are @Component and @NgModule, both are top level decorators.

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

@Component:- Every component has @Component decorator. When you setup the angular and create a project then root component app.component.ts file has.

In app.component.ts

         @Component({
		  selector: 'app-root',
		  templateUrl: './app.component.html',
		  styleUrls: ['./app.component.css']
		})
	

selector:- it should be unique to identify the component.
templateUrl:- It is used to define component’s html file.
styleUrls:- It is used to define component’s css file.

Note:- every component has @component decorator.

@NgModule:- Every module has also @NgModule decorator. When you setup the angular and create a project then root module app.module.ts file has @NgModule decorator. It has many important property like declaration,imports,exports,providers etc.

@NgModule({
  declarations: [component1,component2],
  imports: [Module1],
  exports: [MyModule]
  providers:[Service1, Service2]
})

declarations:- this property used to declare multiple components in the modules file.
imports:- this property is used to include other modules in your module.
exports:- this property is used when you want this module should use in another module.
providers:- It is basically used to include services and used as globally.

2) Property Decorator:- there are lots of property decorator but i am representing @input() and @output() property decorator.

@input():- this decorator is used to transfer data from parent component to child component.

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

export class ItemDetailComponent {

  @Input() item: string; // decorate the property with @Input()

}

Note:- to complete the @Input() Decorator information, click on the link

@Output():- this decorator is used to transfer data from child component to parent component.

import { Output, EventEmitter } from '@angular/core';
	
export class ItemOutputComponent {

@Output() newItemEvent = new EventEmitter();

}

Note:- to complete the @Output() Decorator information, click on the link

3) Method Decorator:- Method decorator is used to declare methods in the component. there are many methods decorators in the angular but I am showing @HostListener.
@HostListener:- this is used to DOM event handler that listens for key-press events.
Example:- when you reload the page then this method listen the event and you can implement logic.

import {HostListener} from '@angular/core'; 	
@Component({
  selector: 'example-component',
  template: 'Woo a component!'
})
export class ExampleComponent {
  @HostListener('window:beforeunload', ['$event'])
  onWindowClose(event: any): void {
   // Do something
  }
}

4) Parameter Decorator:- Parameter decorator is used to inject in the class constructor. it is represented through @inject(). Suppose you have to inject a chatbox in your component.

import { Component, Inject } from '@angular/core';
import { ChatBox } from '../components/chatbox';

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

   constructor(@Inject(ChatBox) private ChatBox) { }
}