Using ngIf without an additional element in Angular 2

Question

Can I use ngIf without an extra container element?

 <tr *ngFor="..."> <div *ngIf="..."> ... </div> <div *ngIf="!..."> ... </div> </tr> 

It does not work in the table because it will make the HTML incorrect.

Answer 1

ng-container preferred over template :

 <ng-container *ngIf="expression"> 

Cm:

Angular 2 ng-container

https://github.com/angular/angular.io/issues/2303

Answer 2

I found a method for this: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

You can simply use the <template> and replace *ngIf with [ngIf] as follows.

 <template [ngIf]="..."> ... </template> 

Answer 3

You cannot put a div directly inside tr , which will result in invalid HTML. tr can only contain the td / th / table element, and there may be other HTML elements inside them.

You can slightly modify your HTML to have *ngFor over tbody and have ngIf on tr , as shown below.

 <tbody *ngFor="..."> <tr *ngIf="..."> ... </tr> <tr *ngIf="!..."> ... </tr> .. </tbody>