A comprehensive guide on Angular Decorators

Angular is a popular JavaScript framework for building web applications. It allows developers to create clean, maintainable, and reusable code, making it an important tool for building modern web applications. With Angular, developers can create user-friendly and efficient web applications that provide a great user experience. Additionally, Angular's use of declarative templates and dependency injection makes it easy to develop applications quickly and with less code. Whether you're a beginner or an experienced developer, Angular is an important tool to have in your toolbox for building high-quality web applications.

Take a look at the following figure which shows the popularity of Angular framework for project development.

Source: Stack Overflow

Angular is one of the top 5 most popular platforms for project development, chosen by 23% of global experts. It has been used in the development of a number of notable projects, including the Guardian, Google Ads, weather.com, and YouTubeTV.

Moreover, Angular was used in the development of PayPal, an outstanding platform which provides quick authorization features. It offers the ability to complete purchases and money transfers without leaving the website, and the platform's excellent security protection, which is crucial for any FinTech apps, makes it far better than any other gateway.

You may also like: Why Does the IT-World Use Angular?

Angular decorators and their purpose

To understand it simply, Angular decorators are design patterns that are used to separate a class's modification or decoration without altering the original code. Decorators are functions in AngularJS that let a service, directive, or filter be changed before it is utilised.

The primary purpose of Angular decorators is to store metadata about a class, method, or property. When you configure a component, you provide metadata for that class that informs Angular that you have a component with a specific configuration. Each decorator has a default configuration with some values.

Every type of decorator performs the same basic function in the project. @Component and @Directive, as well as @Input and @Output, work in the same way from a purely decorative standpoint. This is accomplished by Angular using a factory for each type of decorator. Learn more about the most popular Angular decorator @Component here.

Storing Metadata

Angular decorators separate the class' decoration or modification from the original code. When you configure a component, for example, you're providing metadata for that class that informs Angular that we have a component with a specific configuration. Each decorator has a base configuration that you can provide, along with some defaults. When the decorator is created with the appropriate factory, the default configuration is used.

You may also like: How Not To Fail Choosing A Tech Stack

How are decorators used in a class?

Let’s understand how Angular decorators work in a class. As previously stated, decorators are not yet native to JavaScript; instead, TypeScript provides the functionality to utilize. Now you can check the code that has been compiled to see what occurs when a decorator is applied.

Take a ES6 class –

Then TypeScript will convert this to a function for us:

Now, if we decorate our class, we can see where the decorators are used.

Structure of Decorators

You must have noticed that each decorator follows a similar pattern or structure when used in code in all of the code snippets we have seen so far on decorators. Each decorator begins with the @ symbol and is placed before the class, method, property, or parameter. All of these are functions with open and closed brackets. This enables us to understand that the function is used as an in-built decorator. Decorators can be customized in the same way that functions can.

We can create custom decorators and use them based on the needs of our project.

Types of Decorators

Decorators serve as an essential service while creating projects using Angular versions 2 and up. And given their distinct roles in the process, it is even anticipated that this fundamental idea would apply to JavaScript as well.

By changing new classes, these decorators also improve the extensibility of objects. Instead of scripting the whole behaviour for an object, developers may quickly streamline their code by creating a succession of functions from certain classes.

Angular supports four types of decorators to help developers ease their bespoke software development. They are as follows:

1. Class Decorators

2. Method Decorators

3. Property Decorators

4. Parameter Decorators

Class Decorators

Class Decorators are the top-level decorators that define the purpose of the classes. They specify Angular that so and so class is a component or module. This is the first type of decorator, which informs us of the purpose of a given class and helps us determine whether the class is a component or a module. In Angular, there are several Class decorators, the most common of which are @Component and @NgModule. As an example:

Method Decorators

Method decorators are similar to property decorators but are used for methods rather than properties. This allows us to add functionality to specific methods within our class. @HostListener is a good example of this. This tells Angular that when an event occurs on our host, we want the decorated method to be called along with the event. As an example:

Property Decorators

Property decorators are used to decorate individual properties within classes. Without decorators, we have to define this property in our class anyway for TypeScript to be aware of it, and then tell Angular that we've got a property that we want to be an input somewhere else. Using decorators, we can simply place the @Input() decorator above the property, and Angular's compiler will generate an input binding based on the property name and link them. As an example:

The input binding would then be passed via a component property binding:

Parameter Decorators

We can decorate parameters in our class constructors using parameter decorators. The parameter decorator @Inject() is a popular and widely used one. We can inject services into Angular classes using this decorator.

Custom Decorators

As the term implies, it is something we develop in response to a project requirement that is not served by an Angular decorator. Therefore, we employ custom decorators anytime we wish to provide our class, class property, or class function new characteristics.

How to create a custom class decorator: A step-by-step process

Step 1: Within the app folder of an Angular project solution structure, create a classes folder. Make a class called sample Demo in the classes folder.

Step 2: Once the class has been created, create a decorator folder within the app folder and name the file class.decorator.ts.

Step 3: Because decorators are functions, we will create a Logging function as follows:

'target' is the class in which this decorator will be used, and because we will be using

this decorator on class Demo, we have added the export keyword before this function.

Step 4: Because we'll be using this decorator in the sample demo, let's include the sample demo class with the decorator.

If we include this class in our main component and run it, we will see the output as custom decorator SampleDemo on the console.

Conclusion

Modern technologies are supporting Angular as it continues to evolve. It's one of the first and most popular programming languages for the client-side, albeit it's not the only one. Despite the fact that some people find it difficult to use and ineffective, it has undergone a number of advancements that have made it simpler and more succinct.

When it comes to Angular decorators, we have several options for injecting our codes and logic on various levels of class; after all, everything in programming revolves around classes and their objects.

This blog has gone through different types of Angular decorators, and implemented them practically to understand their purpose of using with classes. Now that you have more confidence, you may begin creating your own custom decorators and fulfill your requirements more effectively.