What are Angular decorators and what is their purpose?

Angular decorators are a design pattern in Angular that plays a crucial role in the framework. They use the decorator pattern to add metadata to classes, methods, properties, and parameters at runtime. In short, decorators are used to extend and modify the behavior of the classes, properties, and functions they are applied to.

There are four main types of Angular decorators:

1. **Class decorators**: These decorators add metadata to a class or modify its behavior. The most commonly used class decorators in Angular are ‘@Component()‘, ‘@NgModule()‘, ‘@Directive()‘, and ‘@Pipe()‘. These decorators define a class as a component, a module, a directive, or a pipe, respectively, and add the necessary metadata to them.

Example of a ‘@Component()‘ decorator:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'my-angular-project';
}

2. **Property decorators**: These decorators are applied to properties inside classes to modify their behavior or add metadata to them. The most common property decorators are ‘@Input()‘, ‘@Output()‘, and ‘@ViewChild()‘. You can create custom property decorators as well.

Example of a ‘@ViewChild()‘ decorator:

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  template: `
    <app-child></app-child>
    <button (click)="onClick()">Call child method</button>`,
})
export class AppComponent {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  onClick(): void {
    this.childComponent.childMethod();
  }
}

3. **Method decorators**: These decorators can be used to modify the behavior of a method or to wrap it with additional functionality. A common method decorator in Angular is ‘@HostListener()‘, which allows you to handle events raised by the host element in a directive or component.

Example of a ‘@HostListener()‘ decorator:

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]',
})
export class HighlightDirective {
  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color: string | null) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}

4. **Parameter decorators**: These decorators are applied to the parameters of a class constructor and are used to inject specific instances. In Angular, the main parameter decorator is ‘@Inject()‘, which is utilized in cases where you need to specify a custom provider for a dependency or inject a value outside the Angular DI system.

Example of an ‘@Inject()‘ decorator:

import { Component, Inject } from '@angular/core';
import { MyService } from './my.service';
import { CUSTOM_VALUE } from './tokens';

@Component({
  selector: 'app-root',
  template: `<p>{{ value }}</p>`,
})
export class AppComponent {
  constructor(
    private myService: MyService,
    @Inject(CUSTOM_VALUE) public value: string
  ) {}
}

In conclusion, decorators in Angular are used to add metadata and modify the behavior of classes, properties, methods, and parameters. This allows the framework to understand their functionality and purpose within the application, and makes it easier to develop and maintain the code.