Decorators in Angular

Decorators are design patterns or functions that define how Angular features work. By using the decorators we can attach metadata to a class declaration, method, property, or parameter.

Decorators are invoked with a prefixed @ symbol, and immediately followed by a class, parameter, method or property.

Angular supports four types of decorators:

1. Class decorators
2. Method decorators
3. Property decorators
4. Parameter decorators
5. Class Decorators:

Angular offers us a few class decorators. Among them, @Component and @NgModule are widely used.

1.1 @Component decorator:

A @Component decorator needs to be followed by a class declaration and takes a metadata object as an argument. The object can have 3 properties. One is the selector which represents this particular component. The selector is similar to a normal HTML tag and helps in accessing this component. The templateUrl holds the relative path of the HTML template associated with this component. The styleUrls has the relative path of the style sheet associated with this component.

1.2 @NgModule decorator:

If a particular class is prefixed with @NgModule decorator then it will be called as a Module. This @NgModule decorator comes into play in a larger application where the whole application is broken down into several modules and a single module can have certain number of components under it. The @NgModule decorator takes a metadata object as an argument which can have 4 properties. One is the declarations property which is an array of components. If a component is created under this module it needs to be declared inside this array. A module can also imports built-in modules like BrowserModule, FormsModule, etc or some other modules of the application. In that case, it needs to be imported inside the imports property.

The providers array contains a list of dependency injection (DI) and it defines the set of injectable objects that are available in the injector of this module. The bootstrap property or key of the @NgModule decorator specifies which component should be loaded by Angular when the app-level module loads. Here in this example, Angular reads the bootstrap metadata and loads the app-level component, called AppComponent.

2. Method Decorator:

Method decorators allow us to decorate specific methods within our class with certain functionality. A good example of this is @HostListener. This allows us to tell Angular that when an event on our host happens, we want the decorated method to be called with the event.

This decorator declares a DOM event to listen for, and provides a handler method to run when that event occurs.

2.1 @HostListener decorator

app.component.html

<h5>Please Scroll the mouse wheel or mousepad of your laptop</h5>

<h3 style=”color: green;”>Scroll Event : {{ scrollValue }}</h3>

app.component.ts

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

@Component({

selector: ‘my-app’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.css’],

})

export class AppComponent {

name = ‘Angular 6’;

scrollValue = 0;

@HostListener(‘document:mousewheel’)

onDocumentMousewheelEvent() {

this.scrollValue = this.scrollValue + 1;

}

}

In here, the @HostListener decorator is declared above the method onDocumentMousewheelEvent(). Declare this decorator along with the type of event that can be possible(in this case the event is mousewheel)

So when the mouse wheel is scrolled the code inside the method gets executed. ie., the value of the variable scrollValue keeps increasing on every mouse scroll.

To be continued…

Hey everyone!! I am Tejaswini.

In this blog, I have shared my knowledge on one of the main building blocks of Angular, Decorators.

Stay connected!! Thank you :)