What are Angular Decorators?

Decorators are patterns of code or functions that describe how Angular features should operate. They add metadata to a class declaration, method, accessor, property, or argument.

Types of Angular Decorators

• Class decorators • Property decorators • Method decorators • Parameter decorators

Class Decorators

The top-level decorators, known as class decorators, are used to specify the functions of the classes. They let Angular know that a specific class is a component or module. Angular's class decorators are @NgModule, @Component, @Injectable, @Directive, and @Pipe.

Property Decorators

To decorate specific properties within the classes, property decorators are used. Angular's property decorators are @Input, @Output, @HostBinding, @ContentChild, @ContentChildren, @ViewChild, and @ViewChildren.

Method Decorators

To decorate specific methods within the classes, method decorators are used. @HostListener is a good example of this. This instructs Angular that you want the decorated method to be invoked along with the event whenever your host experiences an event.

Parameter Decorators

The parameters of your class constructors are decorated using parameter decorators. @Inject, @Self, @SkipSelf, @Optional, and @Host are Angular parameter decorators.

Build modern Angular apps

Syncfusion Angular components offer 80+ UI and Data Viz web controls like DataGrid, Charts, Scheduler, and more, that are responsive and lightweight for building modern web apps.