Exploring Angular Decorators

In this article, we will learn on the topic of Angular Decorators. Angular Decorator is a feature of TypeScript which is implemented as functions.

Decorators are the features of TypeScript that are implemented as functions. Decorators are simply functioning that returns function and these function supply metadata to angular. Decorators are the core concept of Angular 2 + Decorators always start with the symbol (@) and end with the symbol (()).
Decorators are functions in TypeScript.

Project Structure of Angular 2 +

What are the new features in Angular 8

Let’s start more about decorators. Let’s little bit talk about how to set up, create an angular application.

I have created a new Angular Application which is AngApp. Let’s see the Component decorators.

If you do not know how to install angular 2 + versions. Go to setup angular 2 + version

Create a new application open terminal window that you are using. I am using VS Code Editor. If you are using another editor then use the same command to create a new angular application.

Syntax: ng new <application name>

Example:

ng new AngularDecorators

After hit this command, if you are using Angular 7 or 8 then it will ask some question before create the angular application then, select option it accordingly, if you are using lower version of Angular 7 then it will not ask anything, and it will take some times, it depends upon your internet speed.

Types of Angular Decorators: Angular provides the main four types of decorators. They are as listed below.

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

Class Decorators:

A Class Decorator is declared just before a class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify, or replace a class definition. A class decorator cannot be used in a declaration file, or in any other ambient context.

The expression for the class decorator will be called as a function at runtime, with the constructor of the decorated class as its only argument.

Note: @Component & @NgModule decorators are examples of Class Decorators.

When your Angular Application is created go to the app folder and open app.component.ts look the code of this page. You will see @Component() decorators.

Earlier I said @Component & @NgModule decorator is the example of Class Decorators.

@Component Decorator:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngApp';
}

Now let’s see the @NgModule Decorator

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
 
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Method Decorators:

A Method Decorator is declared just before a method declaration. The decorator is applied to the Property Descriptor for the method and can be used to observe, modify, or replace a method definition. A method decorator cannot be used in a declaration file, on overload, or in any other ambient context.

Note: @ HostListner decorators are the example of Method Decorator.

The best example of Method Decorator is the @HostListner.

Let’s see the code.

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@HostListener('click', ['$event'])
onHostClick(event: Event) {
// Write your code which you want.
}
}

Property Decorators:

Property Decorator is an extremely powerful mechanism provided by angular.

A Property Decorator is declared just before a property declaration. A property decorator cannot be used in a declaration file, or in any other ambient context.

Without decorators, in our class, we can define the property and TypeScript know about it. But sometimes we need to tell the TypeScript.

Note: @Input & @Output decorators are examples of Class Decorators.

 I want to create the property with @Input and @Output decorator.

 @Input Decorator:

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  @Input()
   MessageProperty: string;
// Write your code which you want.
}

Parameter Decorators:

A Parameter Decorator is declared just before a parameter declaration. This comes in the picture when injecting primitives into a constructor, and it allows us to decorate parameters in our class constructors.

Note: @Inject and @ Injectable decorators are the example of Method Decorator.

import { Component, Inject } from '@angular/core';
import { MyServices } from './my-services';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(MyServices) myService) {
    console.log(myService);  
// Write your code which you want.
}

Conclusion: In this article, we learned about Angular Decorator, types and how to define and use it.