Angular Decorators

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

Agenda of this article:
1. What is decorator
2. How to create an angular application
3. What question asked by system with appropriate version
4. How many type of Decorator 
5. How to use each of them

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 + version. Decorators always start with the symbol (@) and end with the symbol (()). Decorators are functions in TypeScript.
Let’s talk about how to create an angular application.

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 AngApp

I have created a new Angular Application which is AngApp. 

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.
I am using right now Angular 7 then see what question asked.

There are two questions give the answer of the first question in Yes or No and second select anyone  of these which you want to use in your application and hit enter and it takes some time for configure default library which associate with your application. Then your 
application will created successfully.

Let's come on our topic Angular Decorator.

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

1. 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 { }

2. 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.
}
}

3. 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.
}

4. 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.
}