Angular Decorators

Back to: Angular Tutorials For Beginners and Professionals

Angular Decorators in Detail

In this article, I am going to discuss Angular Decorators in Detail. Please read our previous article where we discussed Modules in Angular Application. At the end of this article, you will understand what exactly Angular Decorators are and the different decorators available and their use in angular application.

What are Angular Decorators?

Decorators are the features of Typescript and are implemented as functions. The name of the decorator starts with @ symbol following by brackets and arguments. That means in angular whenever you find something which is prefixed by @ symbol, then you need to consider it as a decorator.

The decorator provides metadata to angular classes, property, value, method, etc. and decorators are going to be invoked at runtime.

Understanding Decorators:

If you open the app.module.ts file, then you will find AppModule which is the root module of the angular application. Further, if you notice, this AppModule is nothing but it’s a class. Now the question is why we call this class a Module? This is because this class is decorated with @NgModule decorator as shown in the below image. Here, the @NgModule decorator provides the necessary metadata to make the AppModule class as a module.

Note: If you want to create a module in angular, then you must decorate your class with @NgModule decorator. Once a class is decorated with @NgModule decorator, then only the class works as a module.

Commonly used Decorators:

There are many built-in decorators are available in angular. Some of them are as follows:

1. @NgModule to define a module.
2. @Component to define components.
3. @Injectable to define services.
4. @Input and @Output to define properties, etc.

We already discussed the need and use of NgModule decorator and as we progress in this course, we will discuss the rest of the decorators. In fact, in the next article, we will discuss Angular Component and in that article, I will show you the use of @Component decorator.

Note: All the above built-in decorators are imported from @angular/core library and so before using the above decorator, you first need to import the decorators from @angular/core library. For example, if you want to use the component decorator, then first you need to import the component decorator as shown below.

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

Types of Decorators in Angular:

In Angular, the Decorators are classified into 4 types. They are as follows:

1. Class Decorators: @Component and @NgModule
2. Property Decorators: @Input and @Output (These two decorators are used inside a class)
3. Method Decorators: @HostListener (This decorator is used for methods inside a class like a click, mouse hover, etc.)
4. Parameter Decorators: @Inject (This decorator is used inside class constructor).

Note: In Angular, each decorator has a unique role.

We will discuss each of the above decorators in detail as we progress in this course. In the next article, I am going to discuss Angular Components in detail. Here, in this article, I try to give an overview of Angular Decorators. I hope you enjoy this article and got an overview of Angular Decorators.