Angular 2 Structural Directives


Angular 2 Structural Directives

Angular 2 Structural Directives allows us to decide what output we want to render. Angular 2 Structural Directives are ngIfngFor, and ngSwitch.

  1. ngIf   –  ngIf directive conditionally adds or removes HTML elements.
  2. ngFor   –ngFor directive is used to repeat the template.
  3. ngSwitch –

ngIf Directive

*ngIf is syntax to use ngIf directive in Angular.

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

@Component({
  selector:'app-root',
  templateUrl:'./app.html',
})

export class AppComponent {
   private displayName: boolean = true;
}

app.html

<div style="text-align:center">
      <h1 *ngIf ="displayName">Vikash Kumar</h1>
</div>

ngFor Directive

ngFor directive is a way of repeating a HTML templates.

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

@Component({
  selector:'app-root',
  templateUrl:'./app.html',
})

export class AppComponent {
 student: any[] = [ {
      "Roll": "1",
      "Name" : "Vikas"
   },
   {
      "Roll": "2",
      "Name" : "Vicky"
   } ];
}

app.html

<div *ngFor = 'let stud of student'> 
   <ul> 
      <li>{{stud .Roll}}</li> 
      <li>{{stud.Name}}</li> 
   </ul> 
</div>






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229