Exploring the Various Decorators in Angular

Read it in 6 Mins

Last updated on
07th Jun, 2022
Published
10th Nov, 2020
Views
10,507
Exploring the Various Decorators in Angular

There are several important concepts in Angularand Decorators are an important concept to learn when you are working with version 2 and above of Angular. Through this post we will learn about decoratorsits types and how it is being used in real time applications 

Decorators are an important concept in TypeScript and since Angular uses Typescript widelydecorators become an important part of Angular as well.  

What are Decorators? 

Decorators are functions that are invoked with a prefixed @ symbol, and are immediately followed by a class, method or property. They allow a service, directive or filter to be changed before being used. Basically, a decorator provides configuration metadata that determines how the component, class or a function should be processed, instantiated and used at runtime. 

Angular defines a number of decorators that attach specific kinds of metadata to classes, so that the system knows what those classes mean and how they should work. 

There are various types of in-built decorators. Let’s look at each type of decorator in detail. 

Know more about angular cli.

Types of Decorators: 

There are four types of decorators and each type further has its own subset of decorators.  

Class Decorators  

This is the first type of decorator which tells us about particular class’s intent and helps answer questions like whether the class is a component or module. There are various Class decorators in Angular, and among them @Component and @NgModule are widely used. 

Let’s see the structure of class decorators via a code snippet. 

Explanation: 

The below code snippet uses @Component, which is a type of class decorator provided by Angular.

Class Decorators

Property Decorators 

Property decorators are used to decorate specific properties inside a class. Using property decorator, we can easily identify why we use any particular property of a class Like @Input (), @Output@ReadOnly ()@Override () 

Property Decorators

The above code uses @Override decorator before the property name which will invoke the decorator. This is nothing but a function and will override the string property name from “pat” to “test”. 

Method Decorator  

Method decorators, as the name indicates, are used to decorate the method defined inside our class with functionalityA common example of method decorator is @HostListener 

Method Decorator

In the above screen shot @HostListener decorator is used before onHostClick () method. 

Parameter Decorators 

Parameter decorators allow us to decorate parameters in our class constructors @Inject () is common and widely used parameter decorator. Using this decorator, we can inject services in Angular classes. 

Parameter Decorators

Structure of Decorators  

In all the code snippets that we have seen so far on decorators, you must have noticed that each of the decorators follows a similar pattern or structure when used in code. Each decorator starts with @ symbol and is added before the class, method, property, or passed as a parameter. All are functions having open and close brackets. This helps us understand that it is the function that is used as an in-built decorator. Just like a function can be customized, decorators can also be customized.  

Based on the requirement in our project, we can create custom decorators and use them accordingly.  

Custom Decorator  

In this section we are going to learn the steps involved in creating custom decorators. 

As the term custom itself suggests, it is something which we create based on our project need which is not already fulfilled by the in-built Angular decorator. So, whenever we want to add some more features to our class, property of class, or method of class we use custom decorators. 

Here we are going to create a custom class decorator. 

  • Step 1. In an Angular project solution structure, create a classes folder inside the app folder Inside the classes folder create a class namesample Demo . 
  • Step 2. Once the class is created, you can go ahead and create a folder inside the app folder called decorator and add a file name as class.decorator.ts  
  • Step 3. As we know decorators are functions, so we will create a function named Logging, as follows: 

Custom Decorator

target is the class on which this decorator is going to be used and as we are going to use this decorator on class sample Demowe have added export keyword before this function. 

  • Step 4. As we are going to use this decorator in the sample demolet us add the sample demo class with decorator.  

Exploring the Various Decorators in Angular

If we add this class in our main component and invoke, we will see the output on console as custom decorator SampleDemo 

How to pass Data to a Decorator? 

The example explained above is a simple custom decorator where we are logging some messages on the console along with the class name where it is used. But if we want to send messages through the class where we are adding the decorator, then we have to change the implementation of the Function Logging 

Function Logging will accept some arguments and return the message as passed by the decorator on class. When we use the decorators in Angular, we pass in some form of configuration, specific to the decorator. 

For example, when we use @Component we pass through an object, and with @HostListener we pass through a string as the first argument (the event name, such as 'click') and optionally an array of strings for further variables (such as $event) to be passed through to the decorated method. 

Uses of Decorators in Real Time Applications 

Almost all Angular applications use decorator concepts; as decorators are functions that allow a service, directive or filter to be modified prior to its usage. 

@override, @deprecate, @autobind, @mixin are decorators which are widely used in real time applications. Angular framework  has several of these kinds of examples which help to achieve complex features in applications. 

We know now what Angular decorators are and how they work on class, property, methods and parameters to provide information about metadata. 

All decorators work on similar principle. We can apply some changes to the behaviour of the default functionality or we can add some custom tweaks to the code before the decorator can be applied to a class, property or method 

There are different ways to call decorators as these decorators can control start from the class implementation to the property and method implementation within the class. 

Decorators are great when code needs to be customized to suit the needs of the clients and when in-built functions do not help us with what we need.  

Summary

When it comes to Angular decorators, we have several options to inject our codes and logic on different levels of class; as everything in programming revolves around class and its objects. Angular, being a rich framework gives us wide options to handle things in our own way. TypeScript has introduced this concept of decorators and those wishing to implement decorators into their code will benefit from going through TypeScript documents to understand more about actual implementation of decorators and its advanced concepts.  

Profile

KnowledgeHut

Author
KnowledgeHut is an outcome-focused global ed-tech company. We help organizations and professionals unlock excellence through skills development. We offer training solutions under the people and process, data science, full-stack development, cybersecurity, future technologies and digital transformation verticals.