List of all @Decorators available in Angular

List of all the decorators in Angular and their usage.

Here’s the 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

Explanation of each Decorator:

1. @NgModule:

Defines a module that contains components, directives, pipes, and providers.

Usage:

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

@NgModule({
declarations:[Component1, Component2],
imports: [Module1, Module2],
exports: [MyModule],
providers: [Service1, Service2],
bootstrap: [AppComponent]})
class MyModule {}

2. @Component:

Declares that a class is a component and provides metadata about the component.

Usage:

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

3. @Injectable:

Declares that a class has dependencies that should be injected into the constructor when the dependency injector is creating an instance of this class.

Usage:

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

4. @Directive

Declares that a class is a directive and provides metadata about the directive.

Usage:

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

5. @Pipe

Declares that a class is a pipe and provides metadata about the pipe.

Usage:

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

6. @Input

Declares an input property that you can update via property binding (example: <my-cmp [myProperty]="someExpression">).

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

7. @OutPut

Declares an output property that fires events that you can subscribe to with an event binding (example: <my-cmp (myEvent)="doSomething()">).

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

8. @HostBinding

Binds a host element property (here, the CSS class valid) to a directive/component property (isValid).

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

9. @HostListener

Subscribes to a host element event (click) with a directive/component method (onClick), optionally passing an argument ($event).

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

10. @ContentChild

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

Binds the results of the component content query (myPredicate) to a property (myChildComponents) of the class.

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

12. @ViewChild

Binds the first result of the component view query (myPredicate) to a property (myChildComponent) of the class. Not available for directives.

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

13. @ViewChildren

Binds the results of the component view query (myPredicate) to a property (myChildComponents) of the class. Not available for directives.

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