Structural Directive in Angular2

admin Angular 42 Comments

There are three type of Structural directive in Angular 2
1) ngiF
2) ngFor
3) ngSwitch

 
//app.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>Structural Directive ngiF</h1>
  <p *ngIf="showHide"> ngIf structural directive content</p>
  <h1>Structural Directive ngFor</h1>
  <ul>
  	<li *ngFor="let fruit of fruits">{{fruit}}</li>
  </ul>
   <h1>Structural Directive ngSwitch</h1>
   <ul [ngSwitch]="birds">
  	<li *ngSwitchCase="'Peacock'">Peacock is avaliale</li>
  	<li *ngSwitchCase="'Parrot'">Parrot is avaliale</li>
	<li *ngSwitchDefault>No bird  found</li>
  </ul>
  `
})
export class AppComponent { 
	public showHide = true;
	public fruits =['Orange','Lemon','Banana'];
	public birds = 'Parrot';

}

You can download the angulras 2 files from this link Angular 2files

42 thoughts on “Structural Directive in Angular2”

Leave a Reply

Your email address will not be published. Required fields are marked *