What are Angular decorators and give examples

Angular decorators are functions that modify TypeScript classes, properties, methods, or parameters at design time. They are a fundamental part of Angular's architecture, used extensively for adding metadata and configuring how Angular components, directives, services, and other entities behave or interact with the Angular framework.

Examples of Angular Decorators:

1. @Component:

   • Used to define an Angular component class and specify its associated template, styles, selector, and other metadata.

   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponent {
     // Component class logic...
   }
   

2. @Injectable:

   • Used to declare a class as an Angular service that can be injected into other classes via Angular's dependency injection system.

   import { Injectable } from '@angular/core';
   
   @Injectable({
     providedIn: 'root'
   })
   export class DataService {
     // Service logic...
   }
   







3. @NgModule:

   • Used to define an Angular module and specify its declarations, imports, providers, and bootstrap components.

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

4. @Directive:

   • Used to define a reusable custom attribute directive in Angular.

   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) {
       this.el.nativeElement.style.backgroundColor = color;
     }
   }
   

5. @Input and @Output:

   • Used in components to define inputs and outputs for data binding.

   import { Component, Input, Output, EventEmitter } from '@angular/core';
   
   @Component({
     selector: 'app-child',
     template: `
       <button (click)="emitEvent()">Click Me</button>
     `
   })
   export class ChildComponent {
     @Input() message: string;
     @Output() messageEvent = new EventEmitter<string>();
   
     emitEvent() {
       this.messageEvent.emit('Hello from child!');
     }
   }
   

6. @ViewChild and @ViewChildren:

   • Used to query and access child elements or components from a parent component template.

   import { Component, ViewChild, ElementRef } from '@angular/core';
   
   @Component({
     selector: 'app-parent',
     template: `
       <button #myButton>Click Me</button>
     `
   })
   export class ParentComponent {
     @ViewChild('myButton') myButton: ElementRef;
   
     ngAfterViewInit() {
       console.log(this.myButton.nativeElement.textContent); // Access button text content
     }
   }
   

Summary:

Angular decorators play a crucial role in Angular development by providing metadata and configuration options that define how classes, components, directives, services, and other entities behave within the Angular framework. They simplify the process of defining and managing Angular applications by adding metadata at design time, which Angular uses to perform various tasks like dependency injection, rendering components, handling data binding, and more. Understanding and correctly using decorators is essential for effective Angular development and leveraging Angular's powerful features and capabilities.