Understand Angular Decorators – What is a Decorator in Angular?

Decorators are a core concept when developing applications with Angular. Angular.js, Angular’s predecessor, didn’t use Decorators, opting to use methods such as .component() instead. In this post, I will help you understand Angular decorators.

What is a Decorator?

A Decorator is a special kind of declaration provided by TypeScript that can be attached to a class, method, accessor, property, or parameter. Decorators evaluate to a function that will be called at runtime, using the form “@expression” where expression is the name of the function. In short, decorators allow us to make modifications to a class.

There has also been a proposal put forward in 2019 for Decorators to be added as a core JavaScript feature which is currently in stage 2. You can see the proposal on github.

Understand Angular Decorators

Angular provides a number of Decorators to allow you to run functions without making changes to the class. Below are some explanations to help you understand Angular Decorators with code examples.

@NgModule

An NgModule in Angular is class marked with the @NgModule decorator and is one of the most common decorators used, alongside the @Component decorator.

Example of @NgModule Decorator in Angular 

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from. './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]
})

@Component

In Angular, the @Component Decorator is used when defining every component in Angular. The @Component decorator takes an object of metadata about the component such as the ‘selector’ used to call the component or the ‘templateUrl’ which is used to include the HTML template file attached to the component.

The @Component decorator also accepts inline templates using the ‘template’ key and a multiline string value using a backtick. This gives the added bonus of interpolation.

Example of @Component decorator in Angular 

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

@Component({
    selector: 'my-component',
    template: `<p>Hello ${name}!</p>`
})

export class MyComponent {
    let name = 'John';
}

@Injectable

The @Injectable decorator is used to mark a class as available to be injected as a dependency. Commonly, services in Angular are marked with the @Injectable decorator.

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

@Injectable() 

export class UsersService { 
    getUsers() { 
        return [
             'John',
             'Rosie',
             'Archie'  
        ]; 
    } 
}

@Directive

The @Directive decorator is used to define your own directives to attach custom behavior to elements in the DOM. Directives need to be added to the declarations array of an NgModule.

@Pipe

The @Pipe decorator is used to mark a class as a Pipe for use during interpolation within a component’s template.

@Input

The @Input decorator is used to pass data between child and parent directives and components.

Example of a parent components template

<parent-component>
    <child-component [color]="red"></child-component>
</parent-component>

Example of a child component 

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

@Component({ 
    selector: 'child-component', 
    template: `The color is: ${color}` 
}) 

export class ChildComponent extends ParentComponent {
    @Input() public color: string;
}

@Output

In Angular, it is common to share data between a parent component and a child component. Similar to the @Input decorator, the @Output decorator is used in the opposite way, sending data from a child to a parent.

I have created a full post example of the usage of the @Output decorator. 

@ViewChild

The @ViewChild decorator is used to inject a reference of a component that has been added to the components templates.

Example of ViewChild decorator in Angular – Parent Component

import { Component, ViewChild } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({ 
    selector: 'parent-component', 
    template: `<child-component></child-component>` 
}) 

export class ParentComponent {
    @ViewChild(ChildComponent) child: ChildComponent;

    ngOnInit() {
        this.child.sendAlert();
    }
}

Example of ViewChild decorator in Angular – Child Component

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

@Component({ 
    selector: 'child-component', 
    template: `This is a Child Component.` 
}) 

export class ChildComponent {

    public sendAlert() {
        alert('This is an Alert');
    }
}

Conclusion

Angular has provided many decorators to define or modify classes. I hope this post has helped you understand Angular Decorators.

AngularTypeScript