Session 19: Structural Directives In Angular

Structural Directives

* Structural Directives restructures or reshapes the HTML element by adding/removing/manipulating the DOM elements.

 * It easily can be traced because of the structural directives precedes with an asterisk (*) mark.

 * We have generally 3 types of built-in structural directive:

1. *ngIf:    Shows/hides a DOM element based on condition satisfies.

                                <div *ngIf=“isVisible”>Welcome to {{data}}</div>

 2. *ngFor: Repeats the node for each item on applied list.

                                        <div *ngFor=“let item of lstItem”> {{item.ItemName}}</div>

3. *ngSwitch: Selects 1 element out of a series of items in DOM based on a condition satisfies. 

                                <div [ngSwitch]=“item.color”>

                                               <p *ngSwitchCase=“’yellow’”>some text…</p>

                                               <p *ngSwitchCase=“’green’”>some text…</p>

                                              </div>

 * Unlike we have custom attribute directive we can create our own custom structural directive too.