List of All Angular Decorators

In this article we learn about List of All Angular Decorators. Please read my previous article Angular Decorator. We can classify decorators them under four different categories as

1. Class decorators
2. Property decorators
3. Method decorators
4. Parameter decorators

Class decorators

We apply class decorators to classes. @NgModule, @Component, @Injectable, @Directive & @Pipe are Class Decorators in Angular

@NgModule

@NgModule Decorator defines the class as Angular Module and adds the required metadata to it.

@NgModule({
  providers?: Provider[],
  declarations?: Array<Type<any> | any[]>,
  imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>,
  exports?: Array<Type<any> | any[]>,
  bootstrap?: Array<Type<any> | any[]>,
  schemas?: Array<SchemaMetadata | any[]>,
  id?: string,
  jit?: true
})

@Component

The Angular recognizes the class as Angular Component only if we decorate it with the @Component Decorator.

@Component({
  changeDetection?: ChangeDetectionStrategy,
  viewProviders?: Provider[],
  moduleId?: string,
 
  templateUrl?: string,
  template?: string,
  styleUrls?: string[],
  styles?: string[],
  animations?: any[],
  encapsulation?: ViewEncapsulation,
  interpolation?: [string, string],
  preserveWhitespaces?: boolean, 
})

@Injectable

Injectable decorator has two purposes.

One it instructs the Angular that this class needs a dependency. The Angular compiler will generate the necessary metadata to create the class’s dependencies

Second, using the providedIn we inform the Dependency Injection system how to provide the service.

@Injectable({
  providedIn?: Type<any> | 'root' | 'platform' | 'any' | null
})

@Directive

@Directive Decorator marks a class as an Angular directive. The directives help us to change the appearance, behavior, or layout of a DOM element.

@Directive({
  selector?: string,
  inputs?: string[],
  outputs?: string[],
  providers?: Provider[],
  exportAs?: string,
  queries?: { [key: string]: any;},
  host?: {[key: string]: string; },
  jit?: true
})

@Pipe

Decorator that marks a class as Angular Pipe and supplies configuration metadata.

@Pipe({
  name: string,
  pure?: boolean
})

Property Decorators

Property Decorators are applied to the properties of the class.

@Input

Input decorator marks the property as the input property. i.e it can receive data from the parent component. The parent component uses the property binding to bind it to a component property. Whenever the value in the parent component changes angular updates the value in the child component.

Input(bindingPropertyName?: string)

@Output

Output decorates the property as the output property. We initialize it as an EventEmitter. The child component raises the event and passes the data as the argument to the event. The parent component listens to events using event binding and reads the data.

Output(bindingPropertyName?: string)

@ContentChild & @ContentChildren

The ContentChild & ContentChildren are decorators, which we use to Query and get the reference to the Projected Content in the DOM. Projected content is the content that this component receives from a parent component.

ContentChild(
  selector: string | Function | Type<any> | InjectionToken<unknown>, 
  opts?: {read?: any; static?: boolean;}
)

ContentChildren(
  selector: string | Function | Type<any> | InjectionToken<unknown>, 
  opts?: { descendants?: boolean;    read?: any;}
)

@ViewChild & @ViewChildren

The ViewChild or ViewChildren decorators are used to Query and get the reference of the DOM element in the Component. ViewChild returns the first matching element and ViewChildren returns all the matching elements as QueryList of items. We can use these references to manipulate element properties in the component.

ViewChild(
  selector: string | Function | Type<any> | InjectionToken<unknown>, 
  opts?: {
 read?: any; static?: boolean;}
)

ViewChildren(
  selector: string | Function | Type<any> | InjectionToken<unknown>, 
  opts?: {read?: any;}
)

@HostBinding

The HostBinding allows us to bind to a property of the host element. The host is an element on which we attach our component or directive. This feature allows us to manipulate the host styles

@HostBinding(hostPropertyName?: string)

Method decorators

Method Decorators are applied to the methods of the class.

@HostListener

The HostListener listens to host events. The host is an element on which we attach our component or directive. Using HostListener we can respond whenever the user performs some action on the host element.

@HostListener(eventName: string, args?: string[])

Parameter decorators

Parameter Decorators are applied to the constructor parameter of the class.

@Inject

The @Inject() is a constructor parameter decorator, which tells angular to Inject the parameter with the dependency provided in the given token. It is a manual way of injecting the dependency

Inject(token:any)

@Host

The @host is a Parameter decorator that tells the DI framework to resolve the dependency in the view by checking injectors of child elements, and stop when reaching the host element of the current component.

@Self

The @Self decorator instructs Angular to look for the dependency only in the local injector. The local injector is the injector that is part of the current component or directive.

@SkipSelf

The @SkipSelf decorator instructs Angular to look for the dependency in the Parent Injector and upwards.

@Optional

@Optional marks the dependency as Optional. If the dependency is not found, then it returns null instead of throwing an error

Conclusion

Leave behind your valuable queries and suggestions in the comment section below. Also, if you think this article helps you, do not forget to share this with your developer community. Happy Coding 🙂