Learn About Angular Directives

Introduction

Directives are the most fundamental part of an Angular application and are usually used to manipulate the behavior or appearance of DOM element.

There are four different types of directives:

1. Components
2. Structural directives
3. Attribute directives
4. Custom directives

Components

Yes, it’s true – Components are actually a directive and it’s the only directive which has HTML template. Components are the most used directive.

It’s declared using @Component decorator – which contains metadata of component; i.e. selector, templateURL, styleUrls etc.

Example

import {Component} from '@angular/core'
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export classAppComponent{}

Structural Directive

Basically, it’s used to add or remove the DOM elements. Asterisk (*) is used when these directives are added into the template.

*ngIf, *ngFor, *ngSwitchCase are some commonly used structural directives.

Example

<div *ngIf="isAdmin"class="name">{{user.name}}</div>
<ul>
   <li *ngFor="let user of users">{{user.name}}</li>
</ul>

Here, you can see in line #1 - *ngIf, user’s name will be visible only when isAdmin (Boolean) will be true.

In line #3 - *ngFor – it will display the list of users, will add <li>.

Attribute Directive

Used to manipulate the appearance or behavior of the DOM element. [ngStyle], [ngClass] are commonly used.

Example

Here both of the directives [ngStyle] and [ngClass] are taking care of one condition if user’s result equals ‘Pass’ – then it will apply ‘background-color’ : ‘green’ and ‘test-success’ CSS class respectively.

<div [ngStyle]="{'background-color':user.result === 'Pass' ? 'green' : 'red' }"></<div>
<div [ngClass]="{'text-success':user.result === 'Pass'}"></div>

Custom Directive

We can also create our own directive – which we can add as an attribute in our HTML template. Created using the @Directive decorator.

Example

Let’s create a directive which will highlight the element by changing its background to yellow color.

import{ Directive, ElementRef } from '@angular/core';
@Directive({
   selector: '[appHighlight]'
})
exportclass HighlightDirective {
   constructor(el: ElementRef) {
      nativeElement.style.backgroundColor = 'yellow';
   }
}

Line #1

Importing directive and elementRef interfaces from ‘@angular/core’ library

Line #3

Declaring class as a directive which has selector “appHighlight”, which will be used while adding directive into the template.

Line #5

Exporting a class named HighlightDirective, which we have to add in the declarable array inside the @NgModule. The constructor has element reference on which changes will be applied.

To use it, just add as an attribute.

<p appHighlight>Highlight me!</p>

Summary

Directives are the most fundamental element of an Angular application. The component is also a directive and it’s the only directive which has a template inside it. Structural and Attribute directives are used to manipulate the DOM.

Moreover, we can create our own custom directive as per our requirement. It’s really easy to create and use.