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.

Angular Decorators in Detail

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.

See All

Comments (387 Comments)

Submit Your Comment

See All Posts

Related Posts

Angular / Blog

What is Angular?

Angular is an open-source front-end development platform developed by Google that makes it easy to build Mobile and Desktop web applications. Angular now comes with the latest features such as templates, dependency injection, Forms, Pipes, HTTP Service, component, Directives, etc. which are basically needed to build a complex and sophisticated application that lives on the web, mobile, or the desktop.
7-Feb-2022 /35 /387

Angular / Blog

What is Angular 2 (or any higher version) Framework?

In this article, I am going to give a brief introduction to Angular Framework. At the end of this article, you will understand the following pointers in detail.
7-Feb-2022 /35 /387

Angular / Blog

What is Angular Versions and Versioning in Detail?

In this article, I am going to discuss Angular Versions and Versioning in detail. Please read our previous article where we gave a brief introduction to the angular framework. At the end of this article, you will understand the different angular versions and in each version what are the new features introduced as well as what improves. Till now Google has released 7 versions of angular, they are as follows:
7-Feb-2022 /35 /387