What is Angular Decorators?. The Complete Angular Developer Course 2023 [Videos].

In this Video, I am going to discuss Angular Decorators in Detail. Please read our previous Video where we discussed Modules in Angular Application. At the end of this Video, 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 its 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 Video, we will discuss Angular Component and in that Video, 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.