In order to configure a class' anticipated behavior, metadata is used to adorn the class. Decorators represent the metadata.

Metadata about a class, function, or property is what Angular decorators are for. When you configure a component, you are giving that component's class metadata that informs Angular that the component has a particular configuration. Each decorator has a default setting at the base level. The default configuration is supplied when the decorator is built using the appropriate factory.

In Angular, decorators come in four different categories:

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

Class Decorators

The highest level decorators, known as class decorators, are used to specify the functions of the classes. They let Angular know that a specific class is a component or module. For instance:  e.g. @Component and @NgModule

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

@Component({
  selector: 'my-component',
  template: '<div>Class decorator</div>',
})
export class MyComponent {
  constructor() {
    console.log('Hey I am a component!');
  }
}

@NgModule({
  imports: [],
  declarations: [],
})
export class MyModule {
  constructor() {
    console.log('Hey I am a module!');
  }
}

Property Decorators

The particular properties within the classes are decorated using property decorators. Check out @Input (). Consider a class property for which you want to implement input binding. Without decorators, you would need to declare this property in your class so that TypeScript is aware of it. You would then need to notify Angular that you have a property that you want to be an input somewhere else.
Simply place the @Input() decorator above the property using decorators, and Angular's compiler will generate an input binding from the property name and link the two together.

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

@Component({
    selector: 'my-component',
    template: '<div>Property decorator</div>'
})

export class MyComponent {
    @Input()
    title: string;
}

Method Decorators

A method decorator adds functionality to particular methods in your class. This is declared right before the declaration of a method.
This is well illustrated by @HostListener. This instructs Angular that you want the decorated method to be called along with any events that occur on your host.

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

@Component({
    selector: 'my-component',
    template: '<div>Method decorator</div>'
})
export class MyComponent {
    @HostListener('click', ['$event'])
    onHostClick(event: Event) {
        // clicked, `event` available
    }
}

Parameter Decorators

You can decorate arguments in the constructors of your class by using parameter decorators. For instance, @Inject. It instructs Angular as to how you desire that parameter to be started.

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

@Component({
    selector: 'my-component',
    template: '<div>Parameter decorator</div>'
})
export class MyComponent {
    constructor(@Inject(MyService) myService) {
        console.log(myService); // MyService
    }
}

I hope you will like the content and it will help you to learn Defining Metadata with a Decorator in Angular.
If you like this content, do share.


Recommended Posts

View All

Angular 13 Directives – Component, Structural & Attribute


Angular Directives tutorial, Directives in Angular is basically a TypeScript class. such as Component, Structural &amp;amp;amp; Attribute.

What are the key components of Angular?


Angular is a powerful JavaScript framework for building web applications. Discover its key components and how they work together in this guide.

Different Types of Data Binding in Angular


Explore the various techniques of data binding in Angular - one-way, two-way, event, and interpolation binding - to optimize your app's performance.

Advanced Techniques for Optimizing Angular Performance


Learn advanced techniques for optimizing Angular performance, including lazy loading, AOT compilation, change detection strategies, caching strategies...

Angular 13 Firebase - Create a user with an Email address and Password


We&amp;#039;ll show you how to use the Firebase database to create a user with an email and password in the Angular 13 frontend framework.