Structural Directive in Angular

*ngIf:-

ngIf is the conditional directive of Angular. ngIf simply helps a view to be controlled based on a condition.

Example:

showDiv : boolean = true;
<div *ngIf = "showDiv">Show Div</div>

*This div only shows when its value is true.
*ngIf works with Boolean only.

*ngFor:-

ngFor is used to loop through an array.

Example:

numberArray : number  = [1,2,3,4,5,6,7,8,9];
<ul>
<li *ngFor="let num of numberArray">{{num}}</li>
</ul>

*ngFor works with Array/ Array of Objects only.

*ngSwich:-

ngSwitch is used to check for a view that matches a specific condition.

Example:

colorSelected : string = 'blue';
<div [ngSwitch]=”colorSelected”> The color selected is
<div *ngSwitchCase="'red'"> Red </div>
<div *ngSwitchCase="'green'"> Green</div>
<div *ngSwitchCase="'black'"> Black</div>
<div *ngSwitchCase="'blue'"> Blue</div>
<div *ngSwitchDefault> No Color Selected </div>
</div>