Understand Angular Decorators – What is a Decorator in Angular?

By Dillon Smart · · · 1 Comments

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

1 Comment

IKnowThatNow

[…] emit an event, we need to use the @Output decorator on the child component and register a handler for the event by subscribing to the instance on the […]

Was this helpful? Leave a comment!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Angular Material Dialog

Updated 16th August 2022

Angular is an awesome framework, yet it does have a steep learning curve for many developers. This post is aimed at those with experience using Angular 2/4/5 who want to use the Angular Material Dialog. This post will assume you have already installed the @angular/material library. If you have I would refer you to take

WSL vs Dual Boot speed test

Updated 16th August 2022

In this experiment, I will be using WSL2 running Ubuntu 20.04 and Ubuntu 20.04 dual-booted on the same Dell XPS. Is there a noticeable difference? Follow along for the results of the WSL vs Dual Boot speed test. If you are like me and use different development environments a lot, you may find the results

Angular: Call a Parent method in Child Component using @Output

Updated 16th August 2022

In JavaScript frameworks, such as Angular, it’s common for components to communicate with each other and send data back and forth. In this post, I will show you how to call a parent method from a child component in Angular with the @Output decorator using EventEmitters. In all JavaScript frameworks, it’s common for child components