Decorators in Angular

Decorators are a key part of the Angular framework and are used to enhance and configure classes. They are declared using the @ symbol followed by the decorator's name.

Decorators are special functions that modify the behaviour of classes or class members (properties, methods, etc.). Decorators are used to add metadata to classes so that the Angular compiler can process them appropriately.

In Angular, decorators can be broadly categorized into four main types:

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

1. Class Decorators

In Angular, class decorators are used to annotate and modify classes. Class decorators are functions that can be applied to a class declaration, typically prefixed with the @ symbol. These decorators execute when the class is defined, providing a way to extend or modify the behaviour of the class.

@Component,@Injectable,@Directive and @NgModule are widely used class decorators.

@Component

• Decorates a class to become an Angular component.
• It specifies metadata for the component, such as its selector, template, styles, and more.

@Component({
  selector: 'app-example',
  template: '<p>This is an example component</p>',
  styles: ['p { font-weight: bold; }']
})
export class ExampleComponent { }

@NgModule

• Decorates a class to become an Angular module.
• It provides metadata for configuring the module, including declarations, imports, exports, providers, and bootstrap components.

@NgModule({
  declarations: [ExampleComponent, ExampleDirective],
  imports: [CommonModule],
  exports: [ExampleComponent, ExampleDirective],
  bootstrap: [AppComponent],
  providers: []
})

@Directive

• Used to create custom directives in Angular.
• Directives are markers on a DOM element that tell Angular to attach a behaviour to that element.
• Directives are used to create reusable components or add behaviour to elements in the DOM.

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective { }

@Injectable

• Used to declare a class as injectable, making it eligible for dependency injection.
• Typically used with services.

@Injectable({
  providedIn: 'root',
})
export class ExampleService { }

@Pipe

• Used to create custom pipes for transforming data in templates.

@Pipe({
  name: 'customPipe'
})
export class CustomPipe implements PipeTransform {
  transform(value: any, ...args: any[]): any {
    // Pipe transformation logic
  }
}

2. Property Decorators

Property decorators in angular are used to annotate and modify class properties. They are applied to the property declarations directly. Property decorators are invoked at runtime with the target object (instance of the class) and property name.

@Input(),@Output(),@HostBindingare widely used property decorators.

@Input

• Used to declare an input property in a component.
• Allows the parent component to pass data to the child component.

@Input() userName: string;

@Output

• Used to declare an output property in a component.
• Allows a child component to emit events that the parent component can listen to.

@Output() notify: EventEmitter<string> = new EventEmitter<string>();

@HostBinding

• Used to bind a property of the host element of a directive.

@HostBinding('style.backgroundColor') backgroundColor: string;

3. Method Decorators

Method decorators in angular are used to annotate and modify class methods. They are applied to the method declarations directly. Method decorators are invoked at runtime with the target object (instance of the class), the property name (method name), and a property descriptor.

@ViewChild,@ContentChild,@HostListener are widely used method decorators.

@ViewChild and @ViewChildren

• Used to access child components or elements from the parent component.

@ViewChild(ChildComponent) childComponent: ChildComponent;

@HostListener

• Used to listen for events on the host element of a directive.

@HostListener('click', ['$event']) 
onClick(event: Event) {   
  // Do something on click 
}

4. Parameter Decorators

Parameter decorators in angular are used to annotate and modify the parameters of a method or constructor. They are applied to the parameters within the method or constructor signature. Parameter decorators are invoked at runtime with the target object (instance of the class), the method or constructor name, and the parameter index.

@Host,@Inject,@Self,@SkipSelf are widely used parameter decorators.

@inject

• Used to specify a dependency injection token explicitly.

@Inject(L10N_LOCALE) public locale: L10nLocale

The above code is specifying that the locale property should be injected with a value associated with the L10N_LOCALE token.

These decorators play a crucial role in configuring and extending the behaviour of Angular components, directives, services, and other elements. They help in organising and enhancing the functionality of an Angular application.

In summary, Angular provides additional decorators for various purposes. Understanding and using decorators in Angular is fundamental to building robust and maintainable applications with the framework. Decorators help in expressing the intent of the code, configuring dependencies, and facilitating the use of Angular’s powerful features.

Thanks for reading!!!