Angular Directives

Challenge Inside! : Find out where you stand! Try quiz, solve problems & win rewards!


Angular applications are built mostly with the available directives. A component directive, which is a basic building piece of the application, is often used.


This article will go over directives in angular and the many sorts of directives available. Also about the ways to create custom directives.

What is Angular Directive?

Directives in angular are DOM elements (such as attributes) that instruct Angular to add a certain behavior to a behavior element. Angular itself has a variety of directives to assist you in your code. You may also write your code.

Component Directive

An angular component, or basic building block of an angular application, is a directive with an HTML template attached to it.

It is defined using the @Component decorator above the class, which includes metadata about the component.

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

      Hello World!

export class MyComponentComponent {	

The component's selector may now be used in any HTML template to include the component.

    <div class="main">

Structural Directives

Structural directives affect the layout of the DOM by adding and deleting DOM elements. There are a few built-in structural directives such as NgIf, NgForOf, NgSwitch etc.

Structural directives allow content to be introduced conditionally dependent on the outcome of an expression or to be repeated for each item in a data source.

Commonly Used Structural Directives

ngFor The ngFor directive is used to generate the same set of elements for each object in an array.

It may also be compared to the for loops used in any programming language to iterate a piece of code; similarly, we can use ngFor to iterate any UI block.

<div *ngFor="#item of array">

ngSwitch The ngSwitch directive is used to choose between multiple elements to include in the HTML document based on the result of an expression.

It may also be compared to switch-case statements, which are used to choose one of several possibilities. So, we can utilize ngSwitch in the HTML template to show the needed UI block.

<div [ngSwitch]="value">
  <span *ngSwitchCase="1">Value 1</span>
  <span *ngSwitchCase="2">Value 2</span>
  <span *ngSwitchDefault>Default</span>


The ngIf directive is used to include an element if the expression evaluates to true. It is similar to if-else statements used in programming.

<div *ngIf="expression"> 

Only when the value of the expression is true will the block be displayed.

Attribute Directives

Attribute directives are classes that can change the behavior or appearance of the element to which they are applied.

There are a few built-in attribute directives available, and a custom directive can also be created using @Directive.

Commonly Used Attribute Directives


The square and parenthesis surround the ngModel directive. It is also known as banana-in-the-box and helps with two-way binding. It binds to a form element such as input, select, selectarea, and so on.

Use the following syntax in the template:

<input type="text" name="value" [(ngModel)]="value">

ngClass Using this directive, we may modify the look of DOM components by adding or deleting classes.

<div [class]="classNames">Hello {{ name }}.</div>

ts file:

classNames = 'main'


This is a directive for establishing an element's CSS styling. If you just want to set one style, you should generally use something like this code:

<div [style.fontSize]=" selected ? 'x-large': 'smaller'" >
    Hello {{ name }}

However, ngStyle is the way to go if you want to set multiple styles.

<div [ngStyle]="{'color': 'blue', 'font-size': '24px', 'font-weight': 'bold'}">
    Hello {{ name }}

Building Custom Directives

We can also create custom directives in angular. In other words, the developer can design directives based on their requirements.

In the console, use the following command to create a directive:

   ng generate directive change-background

The ts file will be generated, containing the following code:

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

  selector: '[appChangeBackground]'
export class ChangeBackgroundDirective {
  constructor() { }

@Directive specifies that the class below is a directive, and it also provides directive-related metadata.

And ElementRef will be used to update the DOM element directly.

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

  selector: '[appChangeBackground]'
export class ChangeBackgroundDirective {
   constructor(private el: ElementRef) { = 'red';

Apply directive in the HTML template

<p appChangeBackground> Change Background </p>

It will change the element's background.

There are several use scenarios in which custom directives in angular can be included or can be useful in real-time.


There are three types of directives in angular:

  • Component Directive @Component decorator is used to define component directives. HTML template connected to it.

  • Structural Directive There are a few built-in structural directives that may change the DOM components at run time such as NgFor, NgIf etc.

  • Attribute Directive

    • Attribute directives are used to modify the look or behavior of DOM elements. There are a few built-in directives available ngModel ngClass ngStyle

    • Attribute directives can be customized to meet specific needs.

Free Courses by top Scaler instructors