Labelled with a prefixed @ symbol, decorators are techniques or design patterns run before a class, method, or property. They allow a filter, directive, or service to be changed before use. 

Angular has several decorators that let the system know what all these classes mean and how they should operate by attaching different kinds of metadata to classes.

 

Method decorators are used to provide functionality to the methods specified inside our class. 

import { Component, HostListener } from '@angular/core';  
@Component({  
 selector: 'method-component',  
 template: '<div> This is a test method component ! </div>',  
})  
export class MethodComponent {  
 @HostListener('click', ['$event'])
   onHostClick(event: Event) {
   console.log('clicked now this event is available !');  
   }
}

@HostListener(eventName, args?): Declares a method as a listener for a specific event on the host element of the component or directive.

 

 

Class Decorator: The highest level decorators that define the goal of the classes. They tell Angular that a certain class is either module or component. The decorator lets us state this impact without really coding inside the class. 

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

Built-in Clsss Decorator Examples:

• @Component(options): Marks a class as an Angular component, providing metadata like its selector, template, and styles.
• @Directive(options): Marks a class as an Angular directive (either structural or attribute), providing metadata like its selector.
• @Injectable(options): Marks a class as a service that can be injected as a dependency. The providedIn property in the options determines where the service is registered in the dependency injection hierarchy.
• @Pipe(options): Marks a class as an Angular pipe, providing metadata like its name for use in templates.
• @NgModule(options): Marks a class as an Angular module, defining its imports, exports, declarations, providers, and bootstrap components.

 

 

Parameter decorators, Applied to parameters of a class constructor or a method. They are often used in dependency injection to provide metadata about the parameter.

Built-in Examples:

• @Inject(token): specifies the DI token for a constructor parameter. This is useful when the type of the parameter is not sufficient to identify the dependency (e.g., when injecting primitive values or interfaces).
• @Optional(): Marks a constructor parameter as optional. If the dependency cannot be resolved, the parameter will be null.
• @Self(): Limits the dependency injection search to the current injector.
• @SkipSelf(): Instructs the DI system to start its search in the parent injector.
• @Host(): Limits the dependency injection search to the host element's injector.

 

 

Property Decorator: They let us improve certain propery characteristics.

@Input()  
 exampleProperty: string;  

Built-in Examples:

• @Input(bindingPropertyName?): Marks a class property as an input property that can receive data from a parent component via property binding. The optional bindingPropertyName allows you to specify a different name for the input property in the template.
• @Output(bindingPropertyName?): Marks a class property as an output property that emits events to a parent component via event binding. The property should be an EventEmitter. The optional bindingPropertyName allows you to specify a different name for the event in the template.
• @ViewChild(selector, options?): Injects the first element or component matching the selector from the component's view DOM.
• @ViewChildren(selector, options?): Injects a QueryList of all elements or components matching the selector from the component's view DOM.
• @ContentChild(selector, options?): Injects the first element or component matching the selector from the component's content (transcluded elements).
• @ContentChildren(selector, options?): Injects a QueryList of all elements or components matching the selector from the component's content.
• @HostBinding(hostPropertyName): Binds a class property to a property of the host element of the component or directive.