Decorators in Angular(@ )

Decorator:
----------

Typescript -------->Decorator function--------->Angular requirement
     class                    [modify]

Decorator is a function that will modify typescript class to the requirement
 of angular

Syntax:
    @<decoratorname>({
                   info==>metadata
                    })
    export class <classname>
     { .. } 

Decorator function name should be prefixed with @ symbol
Angular is providing so many decorator functions
 

1.component decorator--It will convert typescript class into component class
                        of angular
 2.NgModule decorator--it will convert typescript class into module class
                       of angular
     ..
Decorator function will attach metadata to the typescript class, this metadata
 will inform angular what the class mean and how the class to be processed
Metadata will describe typescript class to angular, based on this angular
 will execute typescript class
Metadata will differ to different decorators

 

we have @NgModule Decorator , Once a class is decorator with @NgModule Decorator, then only the class works as a module.

Different  Types of Decorator

1. Class Decorators: @Component and @NgModule
2. Property Decorators: @Input and @Output (These two decorators are used inside a class)
3. Method Decorators: @HostListener (This decorator is used for methods inside a class like a click, mouse hover, etc.)
4. Parameter Decorators: @Inject (This decorator is used inside class constructor).