// Web Development //

Understand Angular Decorators – What is a Decorator in Angular?

by Dillon - Updated -

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.


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';

    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [],
    bootstrap: [AppComponent]


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';

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

export class MyComponent {
    let name = 'John';


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'; 


export class UsersService { 
    getUsers() { 
        return [


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.


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


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

Example of a parent components template

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

Example of a child component 

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

    selector: 'child-component', 
    template: `The color is: ${color}` 

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


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. 


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';

    selector: 'parent-component', 
    template: `<child-component></child-component>` 

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

    ngOnInit() {

Example of ViewChild decorator in Angular – Child Component

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

    selector: 'child-component', 
    template: `This is a Child Component.` 

export class ChildComponent {

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


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

Related Posts

Dillon Smart

👋 Hey, I'm Dillon!

I'm a Full Stack developer from the U.K. I've been building websites and applications for 11 years! Along the way I've picked up a few things, and share them here on

Feel free to reach out on Twitter!

1 Comment


[…] 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 […]

Leave a comment

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