Angular Decorators

In Angular, a decorator is a function that adds metadata to a class, its members, or its method arguments. Decorators are a way to extend the functionality of a class, method, or property by attaching additional features or behaviors to them.

There are four main types that are used to provide additional information about a class or its members:

• Class decorators, e.g. @Component and @NgModule
• Property decorators for properties inside classes, e.g. @Input and @Output
• Method decorators for methods inside classes, e.g. @HostListener
• Parameter decorators for parameters inside class constructors, e.g. @Injectable

@Component

The @Component decorator is used to define a component in an Angular application. It takes an object with various properties, such as the component's template, style, and selector, as an argument.

In this example, the @Component decorator is applied to the AppComponent class, which defines a component with an 'app-root' selector and a simple template.

@Input

The @Input decorator is used to bind a component's input property to a value that is passed from its parent component.

In this example, the @Input decorator is applied to the message property of the ChildComponent class, which indicates that the message property can be bound to a value passed from the parent component.

@HostListener.

The @HostListener decorator in Angular is a function that allows you to bind a host element event to a component method. It is used to listen for events that are triggered on the host element, such as mouse events, keyboard events, and touch events.

In this example, the @HostListener decorator is applied to the onClick method of the MyComponent class. It listens for the click event on the host element (in this case, the document object) and logs the event object to the console when the event is triggered.

You can also pass an optional array of arguments to the @HostListener decorator, which will be passed to the component method when the event is triggered. In this case, the $event argument is passed to the onClick method, which allows you to access the event object that triggered the event.

@Injectable

The @Injectable decorator is used to define a service in an Angular application. It indicates that the service can be injected into other components or services.

In this example, the @Injectable decorator is applied to the MyService class, which defines a service that can be injected into other components or services.

To create a custom decorator, you can define a function that takes the target class or its member as an argument and then adds the desired behavior or metadata. Here's an example of a custom decorator that logs a message when a method is called:

In this example, the logMethod decorator is applied to the myMethod method of the MyClass class. The decorator function takes the target class, the name of the method (key), and the method's descriptor (descriptor) as arguments. It then defines a new implementation for the method that logs a message before calling the original method. Finally, it returns the modified descriptor.

To use the decorator, you can simply apply it to the class or method you want to decorate by using the @ symbol followed by the name of the decorator function. In this case, the @logMethod decorator would be applied to the myMethod method of the MyClass class.