Structural Directives in Angular - GeeksforGeeks

31 Jul, 2020
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:
<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>
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:
<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>
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"];

<div *ngFor="let item of items"> <p >  {{item}} </p></div>
Output:
*ngFor example
Example-2 of *ngFor with Indexes:Consider that you are having a list as shown below :
items = ["GfG ", "GfG ", "GfG ", "GfG "];

<div *ngFor="let item of items;let i=index"> <p >  {{item}} {{i}} </p></div>
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:
<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>
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 
AngularJS-Directives
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Angular PrimeNG Dropdown Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Angular 10 (blur) Event
How to create module with Routing in Angular 9 ?
How to setup 404 page in angular routing ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?