Open In App

How to use ngIf without an extra element in Angular2?

Improve
Improve
Like Article
Like
Save
Share
Report

In order to use *ngIf without an extra element in Angular 2+, we can use either <ng-container> or <ng-template>
But in many cases, <ng-container> is recommended.
The best scenario regarding the usage of with *ngIf without an extra element is mentioned below.

app.component.ts:




import { Component } from '@angular/core';
@Component({
  selector: 'my-app-table',
  template: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
India=[{city:'Hyderabad'}, {city:'Mumbai'}]
  
}


app.component.html :




<h1>ng-container example</h1>
  
 <div *ngFor="let state of India"
   <ng-container *ngIf="state.city">
      <p> {{ state.city }} </p>
   </ng-container>
 </div>


Illustration of above code for ng-container

If we inspect it then  we can see there is no extra element added after <div> tag and before <p> tag.



Last Updated : 29 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads