Angular built-in directives

Directives are classes that add additional behavior to elements in your Angular applications.

Angular provides two types of directives:

• attribute directives
• structural directives

Attribute directives

Attribute directives change the appearance or behavior of a DOM element, component or another directive. They don't change the structure.

The most common Angular attribute directives are:

• ngStyle - adds and removes CSS styles
• ngClass - adds and removes CSS classes
• ngModel - adds two-way data binding to an HTML form element

We can add multiple attribute directives to a single element. Angular doesn't restrict us to use only one directive as it happens with structural directives.

ngStyle

ngStyle is an attribute directive that allows to set multiple CSS styles based on the state of the component.

It acceps object:

<p [ngStyle]="{color: getColor()}"></p>

and a function:

HTML:

<p [ngStyle]="getStyles()"></p>

TypeScript:

getStyles() {​​​​​​​ 
    return {
        color: this.getColor(),
        background: this.getBackground()
    }
​​​​​​​}

ngClass

ngClass allows to add multiple CSS classes.

It accepts object:

<p [ngClass]="{red: isImortant, yellow: isWarning}"></p>

expression:

<p [ngClass]="isImortant ? 'red' : 'green'"></p>

and a function:

HTML:

<p [ngClass]="getClasses()"></p>​​​​​​​

Typescript:

getClasses() { 
    return {
        red: this.isImortant,
        warning: this.isWarning
    };
}​​​​​​​

ngClass doesn't overwrite a class attribute but extends it.

the given example:

<p class="bold" [ngClass]="{red: true, big: true}">lorem ipsum</p>

will give a following result:

<p class="bold red big">lorem ipsum</p>

ngModel

​​​​​​​ngModel allows to display a data property and update that property when the user makes changes. To uses ngModel you need to import FormsModule.​​​​​​​

<input [(ngModel)]="surname"/>​​​​​​​

Structural directives

Structural directives change the DOM layout by adding and removing DOM elements.

The most common Angular sreuctural directives are:

• ngFor
• ngIf
• ngSwitch

We can only add one structural directive to a single DOM element. If we try to add more than one, we get an error similar to below:

Template parse errors: Use only one attribute prefixed with *

To solve that issue we can use one structural directive on a container element and a second structural directive on an element nested inside.

<div *ngIf="arr.length > 0">
    <div *ngFor="let el of arr">{{el.title}}</div>
</div>

or use ng-container:

<ng-container *ngIf="arr.length > 0">
    <div *ngFor="let el of arr">{{el.title}}</div>
</ng-container>

ngIf

ngIf is a structural directive that adds and removes DOM elements. When ngIf is false, Angular removes an element and its descendants from the DOM.

<p *ngIf="isEmailEmpty">Email is required</p>

ngFor

NgFor is a structural directive that allows us to repeat a block of HTML as a template for each item in the list.

<p *ngFor="let item of items">{{item.title}}</p>

ngSwitch

ngSwitch is a structural directive that adds/removes DOM sub-trees when the nest match expressions match the switch expression.

<div [ngSwitch]="value">
  <p *ngSwitchCase="1">should be visible when option is equal to 1</p>
  <p *ngSwitchCase="2">should be visible when option is equal to 2</p>
  <p *ngSwitchDefault>should be visible when there is no case match</p>
</div>​​​​​​​

Summary

• Directives are classes that add additional behavior to elements
• Angular provides two types of directives - attribute directives and structural directives
• Attribute directives change the appearance or behavior of a DOM element, component or another directive
• The most common Angular attribute directives are ngStyle, ngClass, ngModel
• We can add multiple attribute directives to a single element
• Structural directives change the DOM layout by adding and removing DOM elements
• The most common Angular sreuctural directives are ngFor, ngIf, ngSwitch
• We can only add one structural directive to a single DOM element