How to use ngIf without an extra element in Angular2?
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.
