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

Lazy Loading Techniques in Angular for Enterprise Applications


Learn about lazy loading techniques in Angular for efficient loading of enterprise applications. Optimize performance and enhance user experience.

Full Angular 13 Firebase Authentication Tutorial Example


We&amp;#039;ll show you how to create an Angular Firebase authentication system from the ground up with the Firebase Real-time NoSQL cloud database.

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.

TOP PROGRAMMING LANGUAGES USED IN POPULAR WEBSITES


A programming language is mainly used for developing apps for desktop and mobile devices.

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.