Structural Directives in Angular

Structural directives are responsible for the Structure and Layout of the DOM Element. It is used to hide or display the things on the DOM. Structural Directives can be easily identified using the ‘*’. Every Structural Directive is preceded by a ‘*’ symbol.
Some of the Build in Structural Directives with Examples are as follows:

1. *ngIf:

ngIf is used to display or hide the DOM Element based on the expression value assigned to it. The expression value may be either true or false.

Syntax:

<div *ngIf="boolean"> </div>

In the above Syntax, boolean stands for either true or false value. Hence, it leads to 2 valid syntaxes as below :



<div *ngIf="true">  </div>
<div *ngIf="false">  </div>

Example of *ngIf:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div *ngIf="false">
  This text will be hidden
  <h1 [ngStyle]="{'color':'#FF0000'}">
    GFG Structural Directive Example
  </h1>
</div>
<div *ngIf="true">
  This text will be displayed
  <h1 [ngStyle]="{'color':'#00FF00'}">
    GFG Structural Directive Example
  </h1>
</div>

chevron_right


Output:

*ngIf Example

2. *ngIf-else:

ngIf-else works like a simple If-else statement, wherein if the condition is true then ‘If’ DOM element is rendered, else the other DOM Element is rendered. Angular uses ng-template with element selector in order to display the else section on DOM.

Syntax:

<div *ngIf="boolean; else id_selector">  </div>
<ng-template #id_selector>  </ng-template>

In the above Syntax, boolean stands for either true or false value. If the boolean value is true then Element in If is rendered on the DOM, else another element is rendered on the DOM .
Example of *ngIf- else:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div *ngIf="false;else id_selector">
  This text will be hidden
  <h1 [ngStyle]="{'color':'#FF0000'}">
    GFG Structural Directive 
    If Part
  </h1>
</div>
<ng-template #id_selector>
  This text will be displayed
  <h1 [ngStyle]="{'color':'#00FF00'}">
    GFG Structural Directive 
    Else Part
  </h1>
</ng-template>

chevron_right


Output:

*ngIf – else Example

3. *ngFor:
*ngFor is used to loop through the dynamic lists in the DOM. Simply, it is used to build data presentation lists and tables in HTML DOM.



Syntax:

<div *ngFor="let item of item-list">  </div>

Example of *ngFor:

Consider that you are having a list as shown below:

items = ["GfG 1", "GfG 2", "GfG 3", "GfG 4"];
filter_none

edit
close

play_arrow

link
brightness_4
code

<div *ngFor="let item of items">
 <p >  {{item}} </p>
</div>

chevron_right


Output:

*ngFor example

Example-2 of *ngFor with Indexes:
Consider that you are having a list as shown below :

items = ["GfG ", "GfG ", "GfG ", "GfG "];
filter_none

edit
close

play_arrow

link
brightness_4
code

<div *ngFor="let item of items;let i=index">
 <p >  {{item}} {{i}} </p>
</div>

chevron_right


Output:
Here, the index starts from ‘0’ and not ‘1’

*ngFor with Indexes

4. *ngSwitch :
ngSwitch is used to choose between multiple case statements defined by the expressions inside the *ngSwitchCase and display on the DOM Element according to that. If no expression is matched, the default case DOM Element is displayed. 
Syntax:

<div [ngSwitch]="expression">
  <div *ngSwitchCase="expression_1"></div>  
  <div *ngSwitchCase="expression_2"></div>  
  <div *ngSwitchDefault></div>  
</div>

In the above syntax, the expression is checked with each case and then the case matching with the expression is rendered on DOM else the Default case is rendered on the DOM.
Example of *ngSwitch:

filter_none

edit
close

play_arrow

link
brightness_4
code

<div [ngSwitch]="'one'">
  <div *ngSwitchCase="'one'">One is Displayed</div>  
  <div *ngSwitchCase="'two'">Two is Displayed</div>  
  <div *ngSwitchDefault>Default Option is Displayed</div>  
</div>

chevron_right


In the above example, the expression ‘one’ in ngSwitch is matched to the expression in ngSwitchCase. Hence, the Element displayed on DOM is ” One is Displayed “. 
Output:
 

ngSwitch Case example 




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.