What is the difference between ng-if and *ng-if in angular2

Question

I'm trying to understand the difference between ng-if and *ng-if, but they look the same to me.

Is there a difference that I should keep in mind choosing one over the other and when to use these directives?

Answer 1

ngIf is the directive. Because it's a structural directive (template-based), you need to use the * prefix to use it into templates.

*ngIf corresponds to the shortcut for the following syntax ("syntactic sugar"):

<template [ngIf]="condition">   <p>     Our heroes are true!   </p> </template> 

Equivalent to:

<p *ngIf="condition">   Our heroes are true! </p> 

See this doc for more details:

• https://angular.io/docs/ts/latest/guide/structural-directives.html

Answer 2

The difference is that both are not supported in Angular2 ;-) at least in current versions - it should be *ngIf or ngIf.

Structural directives can be used with explicit <template> tags or implicit <template> tag. For the implicit version a * is required to indicate it is a structural directive.

explicit

<template [ngIf]="someExpr">    <div>content</div> </template> 

or since 2.0.0 preferred

<ng-container *ngIf="someExpr">    <div>content</div> </ng-container> 

implicit

<div *ngIf="someExpr"></div> 

Usually you will use the implicit version because it is more concise.

When to use the explicit version?

There are use cases where the implicit version doesn't work.

• If you want to apply more than one structural directive like ngFor and ngIf which is not supported, then you can use the explicit form for one of these.

Instead of this invalid syntax

<div *ngFor="let item of items" *ngIf="!item.hidden"></div> 

you can use

<ng-container *ngFor="let item of items">   <div *ngIf="!itemHidden></div> </ng-container> 

• If you want to apply the structural directive to more than one element

For example you want to list several items with name and price per row

<tr>   <td *ngFor="???">item.name</td>   <td>item.price</td> </tr>  <tr>   <ng-container *ngFor="let item of items">     <td>item.name</td>     <td>item.price</td>   </ng-container> </tr>