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.