How Structural Directive Used in Angular

What is Structural Directive ?

In angular architecture there is template and component block with existing html files and typescript file. In typescript file having classes to show logic part using loops and function. But this is not in html, hence to add extra functionality and feature in html file to perform loops and function operation with the help of directive is nothing but Structural Directive.

To identify structural directive in html tag "*ng". Here we seen "*ngIf", "[ngSwitch]", "*ngFor". Create your component. Here is only your typescript file,html file and output.

"*ngFor" -

we know for loop is used for number of iteration and reduce lines of code. Here we take simple array of Images and displaying in UI. Commonly using span tag in html for directives operation.

TypeScript file -

import { Component } from '@angular/core';

@Component({
  selector: 'app-practice',
  templateUrl: './practice.component.html',
  styleUrls: ['./practice.component.css']
})
export class PracticeComponent  {
  imaheurls=["https://londonlovesbusiness.com/wp-content/uploads/2018/08/Google.jpg",
    "https://ai.google/static/images/share.png",
    "http://sylhetmirror.com/files/uploads/2018/08/uyh-201808130119.jpg",
  "https://www.standardmedia.co.ke/images/wednesday/cjklozelghelebu5bab82d83571a.jpg"  ]; }

HTML file -

App Component  <br>
Showing for statement Using Sructural Directive
<div>
   
  <span *ngFor="let item of imaheurls">
      
          <img [src]=item height="150" width="150"/>

  </span>
  
</div>

Output -

"*ngIf" -

Normally if statement used for checking the condition either true or false. let's used in html file. Here we perform If the age of student is greater than 25 then allowed to party.

TypeScript File -

import { Component } from '@angular/core';

@Component({
  selector: 'app-practice',
  templateUrl: './practice.component.html',
  styleUrls: ['./practice.component.css']
})
export class PracticeComponent  { ageOfStudent; }

HTML file -

App Component  <br>
Showing If statement Using Sructural Directive
<div>
   Enter Age : <input [(ngModel)] ="ageOfStudent"/><span *ngIf="ageOfStudent>=25"><h4>Allowed To Enjoy A Party</h4>
</span>
</div>

Output -

"[ngSwitch]" -

Using Switch statement to check the multiple condition and reduces lines of code. Here taking whole week and user entering number between 1-7 then show the Day.

TypeScript File -

import { Component } from '@angular/core';

@Component({
  selector: 'app-practice',
  templateUrl: './practice.component.html',
  styleUrls: ['./practice.component.css']
})
export class PracticeComponent  { number; }

HTML file -

App Component  <br>
Showing Switch statement Using Sructural Directive
<div>
   Enter Number : <input [(ngModel)] ="number" type="number"/>
   <span [ngSwitch]="number">
      <span *ngSwitchCase="1"><h3>Monday</h3></span>
      <span *ngSwitchCase="2"><h3>Tuesday</h3></span>
      <span *ngSwitchCase="3"><h3>Wensday</h3></span>
      <span *ngSwitchCase="4"><h3>Thursday</h3></span>
      <span *ngSwitchCase="5"><h3>Friday</h3></span>
      <span *ngSwitchCase="6"><h3>Saturday</h3></span>
      <span *ngSwitchCase="7"><h3>Sunday</h3></span>
      <span *ngSwitchDefault>This number is not having any day.</span>
    </span>
</div>

Output -

Conclusion -

Using Of Structural Directive it is possible to provide extra feature to html files are very easy and help to reduces lines of Code.