There are several important concepts in Angular, and 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 decorators, its types and how it is being used in real time applications.
Decorators are an important concept in TypeScript and since Angular uses Typescript widely, decorators become an important part of Angular as well. To know more about web development, check out what is Full Stack Developer course.
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 a particular class’s intent and helps answer questions like whether the class is a component or a 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.
Property Decorators
Property decorators are used to decorate specific properties inside a class. Using a property decorator, we can easily identify why we use any particular property of a class Like @Input (), @Output, @ReadOnly (), @Override ()
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 functionality. A common example of method decorator is @HostListener
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 a common and widely used parameter decorator. Using this decorator, we can inject services in Angular classes.
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 named sample 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:
‘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 Demo, we have added export keyword before this function.
- Step 4. As we are going to use this decorator in the sample demo, let us add the sample demo class with decorator.
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. Wondering where to begin your career as a developer? Enroll in training for Web Development.
All decorators work on a 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.
Unlock the power of Python with our online learning course. Discover the endless possibilities of this versatile language and become a coding maestro. Join now!
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.
