Angular Structural Directives

By AmarSivas | Created :2019-10-02 | Updated : 2021-01-05 | Viewed : 728 times

The Structural Directive is main key part of Angular. To know more about the Directives please refer Attribute Directives. This tutorial demonstrates about the Structural Directives

Table of Contents:

Structural Directive
Built-in Structural Directives

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

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 ngif Directive is true then Angular will render Html Template part. Otherwise it will not render. We can understand by verifying the below given example.

NgIf Directive Example

<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.

Example for ngFor Directive:

<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 "let language of LanguageList;" language is used for looping of LanguageList. Here language will be looped and displayed in each iteration.

I will write one more article on ngFor directive later. you can refer that later.

NgSwitch

ngSwitch, a Structural Directive, that adds/Remove the Element from the DOM. It works a similar way as the switch conditional statement of javascript does. In other words, The ngSwitch directive will be used for elements hiding/displaying in the HTML template.

Please consider the below-given example of ngSwitch

Example for 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.