Types of Directives in Angular

Directives in Angular are used to change the appearance, behavior, or layout of the DOM. The directives can be classified into 3 types:

Component Directive
Structural Directive
Attribute Directive

Component Directive

The Component in angular is nothing but a directive with a template. The Component directives are annotated with @Component decorator.

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Structural Directive

Structural directives change the structure of the DOM. All the structural directives start with an asterisk (*). Some built-in structural directives are discussed below:

*ngIf

This directive is used to add or remove elements from DOM.
If *ngIf evaluates to true, it adds the element, else removes the element.

<p *ngIf="isVisible">Some paragraph</p>

If isVisible is truthy then it add the element or else if it is falsy then it removes the element.

*ngFor

This directive iterates over an iterable object like arrays.

export class AppComponent implements OnInit {
  countryList: Array<String>;

  ngOnInit(){
    this.countryList = ['India', 'USA', 'Brazil', 'France']; 
  }
}

<div>
    <select>
        <option *ngFor="let country of countryList"> {{country}} </option>
    </select>
</div>

The result HTML will be

<div>
    <select>
        <option> India </option>
        <option> USA </option>
        <option> Brazil </option>
        <option> France </option>
    </select>
</div>

ngSwitch

It works the similar way as switch…case in JavaScript works. NgSwitch is a set of cooperating directives, i.e. ngSwitch, ngSwitchCase, ngSwitchDefault.
The value of ngSwitch will be matched with all ngSwitchCase values, if it matches then respective element gets added in DOM. If no ngSwitchCase matches then the ngSwitchDefault element gets added to DOM.

export class AppComponent  {
  gender = ['M', 'X','F'];
}

<div [ngSwitch]="gen" *ngFor="let gen of gender">
  <h1 *ngSwitchCase="'M'"> Male </h1>
  <h1 *ngSwitchCase="'F'"> Female </h1>
  <h1 *ngSwitchDefault> Other </h1>
</div>

Attribute Directive

Attribute directives change the appearance or behavior of a DOM element. The two built-in attribute directives are discussed below:

ngClass

This directive dynamically adds class of a DOM element.
The ngClass can take String, array and object values.

Passing String value

<div [ngClass]="'container'"> </div>

Passing Array

<div [ngClass]="['container', 'main']"> </div>

Passing Object

<ul *ngFor="let num of numbers; let even = even">
    <li [ngClass]="{'even-element': even, 'odd-element': !even}"> 
        {{num}}  
    </li>
</ul>

If we pass an object to ngClass, the key will be the class name and the value can be an expression. If the expression returns true, then the respective class will be added to the element.

ngStyle

The ngStyle directive dynamically adds CSS properties to DOM elements.
The ngStyle takes object literal with the CSS properties and values as key-value pairs.

<div [ngStyle]="{'background-color': 'grey'}"> </div>

We can use conditional operator to set property’s value.

<ul *ngFor="let num of numbers; let even = even">
    <li [ngStyle]="{'background-color': even ? 'green' : 'red'}"> 
        {{num}} 
    </li>
</ul>

Hope now you have got a clear understanding of Directives in Angular and how to work with it.

See next to know How to create a custom directive in Angular.

Amitav Mishra

JS Curious