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) { }
}