@Decorators available in Angular

@Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code. Here is a list of @Decorators available in Angular.

1. @NgModule
2. @Component
3. @Injectable
4. @Directive
5. @Pipe
6. @Input
7. @Output
8. @HostBinding
9. @HostListener
10. @ContentChild
11. @ContentChildren
12. @ViewChild
13. @ViewChildren

1. @NgModule:
   @NgModule decorator is very common in angular. It can be seen in every module.ts file. The @NgModule decorator contains component declaration, module imports, module and component exports, providers and bootstrap.

import { NgModule } from '@angular/core';
@NgModule({
    declarations:[Component1, Component2],
    imports: [Module1, Module2],
    exports: [MyModule],
    providers: [Service1, Service2],
    bootstrap: [AppComponent]})
class MyModule {}

2. @Component:
@Component decorate declares that a class is a component and provides metadata about the component.

import { Component } from '@angular/core';
@Component({
       changeDetection?: ChangeDetectionStrategy
       viewProviders?: Provider[]
       moduleId?: string
       templateUrl?: string
       template?: string
       styleUrls?: string[]
       styles?: string[]
       animations?: any[]
       encapsulation?: ViewEncapsulation
       interpolation?: [string, string]
       entryComponents?: Array<Type<any> | any[]>
       preserveWhitespaces?: boolean

       // inherited from core/Directive
       selector?: string
       inputs?: string[]
       outputs?: string[]
       host?: {...}
       providers?: Provider[]
       exportAs?: string
       queries?: {...}
})

class ComponentName {
   constructor(){
   }
}

3. @Injectable:
@Injectable decorator declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class. In order to use this decorator we need to import import { Injectable } from '@angular/core'
@Injectable()

4. @Directive:
@Directive decorator declares that a class is a directive and provides metadata about the directive.

import { Directive } from ‘@angular/core’;
@Directive({
     selector?: string
     inputs?: string[]
     outputs?: string[]
     host?: {…}
     providers?: Provider[]
     exportAs?: string
     queries?: {…}
})

5. @Pipe
@Pipe decorator declares that a class is a pipe and provides metadata about the pipe to the ts file.

import { Pipe } from ‘@angular/core’;
@Pipe({
    name: string
    pure?: boolean
})

6. @Input
@Input decorator declares an input property that you can update via property binding. It is used widely in angular for data sharing between two component with a relation of parent to child.

7. @OutPut
@OutPut decorator declares an output property that fires events that you can subscribe to with an event binding. It is widely use in angular when you want to share data from child component to parent component.

<child-component (myEvent)="doSomething()">

import { Output } from ‘@angular/core’;
@Output({
    bindingPropertyName?: string
})

8. @HostBinding
@HostBinding binds a host element property to a directive/component property.

import { HostBinding } from ‘@angular/core’;
@HostBinding({
     hostPropertyName?: string
})

9. @HostListener
@HostListener decorator subscribes to a host element event (click) with a directive/compoenent method (onClick), optionally passing an argument ($event).

import { HostListener } from ‘@angular/core’;
@HostListener({
     eventName?: string
     args?: string[]
})

10. @ContentChild
@ContentChild decorator binds the first result of the component content query (myPredicate) to a property (myChildComponent) of the class.

import { ContentChild } from ‘@angular/core’;
@ContentChild(Pane) pane: Pane;

11. @ContentChildren
@ContentChildren binds the results of the compoenent content query (myPredicate) to a property (myChildComponent) of the class.

import { ContentChildren } from ‘@angular/core’;
@ContentChildren(Pane) topLevelPanes: QueryList<Pane>;

12. @ViewChild
@ViewChild decorator binds the first result of the component view query to a property of the class. Not available for directives.

import { ViewChild } from '@angular/core';
@ViewChild(Pane)

12. @ViewChildren
@ViewChildren binds the results of the components view query to a property of the calss. Not available for directives.

import { ViewChildren } from ‘@angular/core’;
@ViewChildren(Pane) panes: QueryList<Pane>;