Angular Interview Questions

Decorators in Angular are a powerful feature that provide metadata to classes, methods, properties, and parameters, enabling Angular to understand and manage various aspects of the application. They are essentially functions that are prefixed with an @ symbol and are used to modify or annotate the behavior of the item they decorate.

Key Purposes of Decorators in Angular:

1. Metadata Annotation:

   • Decorators add metadata to a class, method, or property. This metadata tells Angular how to process and use the decorated item.
   • For example, the @Component decorator provides metadata about a component, such as its selector, template, and styles.

2. Component Configuration:

   • The @Component decorator is used to define a new component. It provides configuration settings that specify the component’s template, styles, and selector.
   • Example:

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

3. Module Definition:

   • The @NgModule decorator is used to define Angular modules. It configures the module by specifying declarations, imports, providers, and bootstrap settings.
   • Example:

     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. Service Provision:

   • The @Injectable decorator marks a class as available to be provided and injected as a dependency.
   • Example:

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

5. Directive Creation:

   • The @Directive decorator is used to create custom directives. Directives add behavior to existing DOM elements and components.
   • Example:

     import { Directive, ElementRef, Renderer2 } from '@angular/core';
     
     @Directive({
       selector: '[appHighlight]'
     })
     export class HighlightDirective {
       constructor(el: ElementRef, renderer: Renderer2) {
         renderer.setStyle(el.nativeElement, 'backgroundColor', 'yellow');
       }
     }

6. Pipe Definition:

   • The @Pipe decorator is used to create custom pipes. Pipes transform data in the template.
   • Example:

     import { Pipe, PipeTransform } from '@angular/core';
     
     @Pipe({
       name: 'capitalize'
     })
     export class CapitalizePipe implements PipeTransform {
       transform(value: string): string {
         return value.charAt(0).toUpperCase() + value.slice(1);
       }
     }

Common Angular Decorators:

1. @Component:

   • Defines an Angular component.
   • Metadata includes selector, template, styles, etc.

2. @NgModule:

   • Defines an Angular module.
   • Metadata includes declarations, imports, providers, bootstrap, etc.

3. @Injectable:

   • Marks a class as injectable.
   • Can specify the providedIn property to configure how the service is provided.

4. @Directive:

   • Defines a directive.
   • Metadata includes selector and any properties or events it handles.

5. @Pipe:

   • Defines a custom pipe.
   • Metadata includes the name of the pipe.

6. @Input and @Output:

   • Used in components to define input properties and output events.
   • Example:

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

In Summary:
Decorators in Angular serve as metadata annotations that help Angular understand how to process and manage different aspects of the application. They are used for configuring components, modules, services, directives, and pipes, enabling a declarative and organized approach to defining the structure and behavior of an Angular application.