What are decorators in Angular?

Key takeaways:

• Angular decorators are TypeScript features that add metadata to code elements without changing their implementation.

• The four main types of decorators in Angular are class, property, method, and parameter decorators.

• Key decorators include @Component, @NgModule, @Input, @Output, and @HostListener.

• Decorators simplify configuration, improve code readability, and enable powerful features like dependency injection.

• Custom decorators can be created to extend functionality and promote code reusability.

• Proper use of decorators leads to more modular, maintainable, and efficient Angular applications.

• Learning decorators is essential for both beginner and advanced Angular developers to create high-performance web applications.

Decorators are design patterns or functions that define how Angular features work. They make prior modifications to a class, service, filter, methods, properties, or parameters, that allow us to add metadata or alter behavior without changing the underlying code. In the Angular framework, decorators are used to define components, services, and modules.

Let’s discuss each of them in detail.

In the above code:

• Line 3: We apply the @Component decorator to the AppComponent class. The @Component decorator marks this class as an Angular component, which means it will be responsible for a specific view and logic in the application.

• Lines 4–5: The selector defines the custom HTML tag for the component, and templateUrl points to the external HTML file containing the component’s template. Similarly, the styleUrls points to the external CSS file.

In the above code:

• Line 12: We decorate the property selectedBook with @Input() decorator. This allows it to receive data from a parent component. It is initialized to an empty string.

• Lines 14–35: We define an array of books, where each book has a name and a boolean indicating if it is red.

• Lines 37–39: We define the selectBook() method that takes a bookName as a parameter and assigns it to the selectedBook property. This method can be called when a book is clicked, updating the selected book’s name.

The above code tells Angular that an event (in this case, a click event) on our host has happened, and we want the decorated method to be called with the event. The @HostListener decorator is used before the onHostClick() method.

• Lines 13–16: We use the @HostListener decorator to listen for events on the host element of a component or directive. In the example provided, when the host element is clicked, the onHostClick() method is triggered, displaying an alert with the event type.

In the above code:

• Line 15: We use @Inject() to inject our ExampleService into the constructor of the AppComponent. This allows the AppComponent to access the methods and properties of ExampleService. The service is imported in line 2.

• Lines 20–27: We define the updateMessage() to update the message displayed in the component. This method is triggered by a user action, like clicking a button.

Conclusion

Decorators are a powerful feature in Angular that streamline development and enhance code organization. By utilizing TypeScript’s capabilities, Angular decorators provide a clean, efficient way to add metadata and modify the behavior of classes, properties, methods, and parameters. Understanding and effectively using decorators is important for building robust, and maintainable Angular applications that align with modern web development best practices.