Angular Decorators

Decorators is used to declaration a class without modifying the original source code. For Decorators function we have using ‘@’ symbol. There have four types of decorators.

1. Class Decorators
2. Property Decorators
3. Method Decorators
4. Parameter Decorators

1. Class Decorators: Class Decorators allows you to attach meta data with the typescript class using which angular knows whether that class is a component or directive or module or etc.

@NgModule :

This Decorator is used for defines Modules in angular, it contains some metadata like declarations, import, providers, bootstrap etc. Which is used for declare components, modules, services, and which component is a load first.

@Component:

This Decorator is used to defines a component in angular, it contains metadata like selector, template, providers etc.

2. Property Decorators: The property decorators is used inside of the class. In class we defines the properties and when we used a property decorators like @Input and @Output above the properties then properties automatically binds with the @input and @Output decorators.

@Input:

@Output:

3. Methods Decorators: Method decorator same as the property decorator but its applied on methods in the class. There have two decorator such as @HostListener and @HostBinding.

@HostListener : Allow you to handle events of the host element in directive class.

@HostBinding : Allows you to set the properties of the host element from the directive class.

4. Parameter Decorators: allow us to decorate parameters in our class constructors. Manually inject particular service.

@Inject:

Conclusion:

Here we shortly understand the decorators in the angular and their types. This decorator types explained shortly, for details concept you need to learn more.

If you learn in Angular then watch the following video for your best practice.