Angular Structural Directives
By AmarSivas | | Updated : 2021-01-05 | Viewed : 728 times

The Structural Directive is main key part of Angular. To know more about
Table of Contents:
Structural Directive
Structural Directives will take care of about the HTML layout. As per instructions in Structural Directives, Angular will modify the DOM Structure. So, Structural Directives are used to manipulate the DOM Structure. Angular provides Three Built-in Structural Directives.
Built-in Structural Directives
Built-in Structural Directives
-
NgIf
-
NgFor
-
NgSwitch
NgIf
The Directive render the Html Template based on Expression. As per expression Angular will take care of Inclusion/Exclusion of the Template Element in DOM. If Expression in
<p *ngIf="true">
ngIf expression is true So the paragraph is in DOM.
</p>
<p *ngIf="false">
ngIf expression is false So the paragraph is not in DOM.
</p>
NgFor
To Present the data in tables/Lists in the HTML template we should go for ngFor directive in Angular. The core directive will allow Arrays/List for iteration. So here Each item will be displayed through iteration.
Let's consider the programming language list which we need to display in and as an HTML page.
<tr *ngFor="let language of LanguageList;">
<td>{{language .index}}</td>
<td>{{language .name}}</td>
</tr>
So here we used the *ngFor directive with expression. The expression is like
I will write one more article on ngFor directive later. you can refer that later.
NgSwitch
Please consider the below-given example of ngSwitch
<ul [ngSwitch]="OperatingSystems">
<li *ngSwitchCase="'AppleMac'">AppleMac</li>
<li *ngSwitchCase="'MicrosoftWindows'">MicrosoftWindows</li>
<li *ngSwitchCase="'RedhatLinux'">RedhatLinux</li>
<li *ngSwitchDefault>ChromeOS</li>
</ul>
Here it will display the one operating system based on the expression. If no match expression exists then Chrome OS which is the default.