Class Decorator in Angular 8

Introduction

Its really interesting to know why we need Decorator in Angular? If we use Decorator what is the benefit of it? These all question will be answered in this tutorial.

What is Decorator in Angular 8?

Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code.

Decorators are of 4 types.

Class Decorators
Property Decorator
Method Decorator
Parameter Decorator

In this article we will discuss about Class decorator.

Class decorator

Class Decorator

@Component and @NgModule decorator is an example of Class decorator.

If we make a class a component class then we can declare @Component.

If we make a class a child class a module then we can declare @NgModule.

@Component

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

import { Component } from '@angular/core';

@Component({

selector: 'example-component',

template: '<div>{{name}}</div>',

})

export class ExampleComponent {

name: string = "This is my component!!!!!";

}

In the above code we import Component Interface to implement Component decorator(@Component).

@NgModule

@NgModule helps to declare the child module and component to available in the angular application.

import { NgModule } from '@angular/core';

@NgModule({

imports: [ ],

declarations: [ ],

bootstrap: [ AppComponent ]

})

export class AppModule { }

In the above we have to import NgModule interface to make a class a module. Then we can use @NgModule decorator .

Under imports section we can register modules and in declarations section we can declare the components available for angular.

Note:-

In both Component class and Module class we can see there is no logic written with in the class to make the class Component or Module in Angular.

So what we need to do is decorate it and angular will do the remaining work for us.

Thanks..........