Angular Decorators

Introduction

Decorators are design patterns that allow you to change or decorate a class without changing the original code.

Decorators are functions that are called after a class, method, or property and are prefixed with the @ symbol. They let you to modify a service, directive, or filter before using it. A decorator, in essence, is a piece of configuration metadata that specifies how a component, class, or function should be processed, instantiated, and utilised at runtime.

Angular defines a set of decorators that attach various types of metadata to classes so that the system understands what they imply and how they should behave.

An Angular app is the result of a collaboration between the following Angular artifacts:

1. Components

2. Directives

3. Modules

4. Services

5. Pipes

A TypeScript class is used to create each artifact. With the help of decorators, Angular identifies the TypeScript class as an Angular item. To understand how Angular recognises a simple TypeScript class as an Angular component, directive, pipe, service, or module, you'll learn about several decorators and their accompanying properties in this guide.

What Angular Decorators Do

Angular decorators exist just to store metadata about a class, function, or property. When you setup a component, you're telling Angular that you have a component with a specified configuration by giving information for that class. Each decorator comes with a base setup that includes certain default values. The default configuration is supplied when the decorator is built with the appropriate factory.

In Angular, there are four different types of decorators:

1. 1. Class Decorators

2. 2. Property Decorators

3. 3. Method Decorators

4. 4. Parameter Decorators

Class Decorators

The top-level decorators used to define the purpose of the classes are known as Class Decorators. They tell Angular that a given class is a component or module. Consider the following scenario:

import { NgModule, Component } from '@angular/core';
@Component({
  selector: 'event-thumbnail',
  template: `<div>Event Thumbnail Works!</div>`,
})

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

Property Decorators

Property decorators are used to enhance the appearance of specific properties in classes. Take a look at @Input if you're looking for something to do (). Assume you have a property in your class that you'd want to have an input binding for. Without decorators, you'd have to declare this property in your class for TypeScript to recognise it, and then notify Angular that you have a property you wish to be an input somewhere else.

At runtime, the property decorator expression will be called as a function with the following two arguments:

1. 1. For a static member, constructor function of the class, or the prototype of the class for an instance member.

2. 2. The name of the member.

With decorators, you can simply place the @Input() decorator above the property, and Angular's compiler will construct and connect an input binding from the property name.

import { Component, Input } from '@angular/core';
@Component({
  selector: 'event-thumbnail',
  template: '<div>Event Thumbnail Works!</div>'
})

export class EventThumbnailComponent {
  @Input()
  exampleProperty: string;
}

Method Decorators

A Method Decorator adds functionality to specific methods in your class. Just before a method declaration, this is declared.

The method's Property Descriptor receives the decorator, which can be used to observe, edit, or replace a method definition. In a declaration file, on an overload, or in any other ambient context, a method decorator isn't allowed.

At runtime, the method decorator expression will be invoked as a function with the following three arguments:

1. 1. For a static member, either the constructor function of the class, or the prototype of the class for an instance member.

2. 2. The name of the member.

3. 3. The Property Descriptor for the member.

@HostListener is a nice illustration of this. This notifies Angular that you want the decorated function to be called when an event on your host occurs.

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

  selector: 'event-thumbnail',

  template: '<div>Event Thumbnail Works!</div>'

})
export class EventThumbnailComponent {
  @HostListener('click', ['$event'])
  onHostClick(event: Event) {

    // clicked, `event` available
  }
}

Parameter Decorators

In your class constructors, parameter decorators are used to adorn arguments. For instance, consider @Inject. It instructs Angular on how you want that parameter to be invoked.

import { Component, Inject } from '@angular/core';
import { MyService } from './my-service';
@Component({
  selector: 'event-thumbnail',
  template: '<div>Event Thumbnail Works!</div>'
})

export class EventThumbnailComponent {
 constructor(@Inject(MyService) myService) {
 console.log(myService); // MyService
  }
}

At runtime, the parameter decorator expression will be called as a function with the following three arguments:

1. 1. For a static member, either the constructor function of the class, or the prototype of the class for an instance member.

2. 2. The name of the member.

3. 3. The parameter's ordinal index in the function's parameter list.

Conclusion

Angular is a fantastic multi-functional framework that helps you develop faster. It is a strong software development environment that includes dependency injection and deep linking.