What are Class, Method, Property and Component decorators in Angular?

What are class decorators?

Class Decorators are the highest-level decorators that determine the purpose of the classes. They indicate to Angular that a specific class is a component or module. And the decorator enables us to declare this effect without having to write any code within the class.

Example:

import { NgModule, Component } from ‘@angular/core’;

@Component({
selector: ‘class-component’,
template: ‘<div> This is a class component ! </div>’,
})
export class ClassComponent {
constructor() {
console.log(‘This is a class component!’);
}
}

@NgModule({
imports: [],
declarations: [],
})
export class ClassModule {
constructor() {
console.log(‘This is a class module!’);
}
}

It is a component or module in which no code in the class is required to tell Angular. We only need guest blogging website to design it, and Angular will take care of the rest.

What are Method decorators?

Method decorators, as the name implies, are used to add functionality to the methods defined within our class.

Example: @HostListener, is a good example of method decorators.
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 !’);
}
}

The @HostListener decorator is used before the onHostClick () method in the above example code.

What are property decorators?

These are the second most popular types of decorators. They enable us to enhance some of the properties in our classes. We can certainly understand why we utilize any certain class property by using a property decorator.

There are many property decorators available for example @Input(), @Output, @ReadOnly(), @Override()

Example:

import { Component, Input } from ‘@angular/core’;
@Component({
selector: ‘prop-component’,
template: ‘<div> This is a test component ! </div>’
})

export class PropComponent {
@Input()
exampleProperty: string;
}

The input binding would be sent via a component property binding:

<prop-component
[propProperty]=”propData”>
</prop-component>

What is the Component Decorator in Angular?

TypeScript classes are used to create components. This class genre is then decorated with the “@Component” decorator. The decorator’s function is to take a metadata object holding component information type of sentence in english grammar and decorate it.

A Decorator is always preceded by @. The Decorator must come before the class definition. We can also make our own decorators.

Example: The example below shows us a Class decorated with the @Component decorator.

import {Component} from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘Example component’;
}

The metadata object received by the decorator has values such as templateUrl, selector, and others, with the templateUrL property pointing to an HTML file that defines what you see on the application.