Brian Leach Brian Leach - 9 months ago 69
TypeScript Question

What is the difference between ngFor and *ngFor

I cannot find a good description of the differences anywhere. Same with


An example of

<li *ngFor="let video of page" ...>
<img src="api/Videos/{{}}/thumbnail">

and an example of

<template ngFor let-labelid [ngForOf]="labelLookup | keyValueFilter" >
<label [ngStyle]="{'background-color': labelLookup[labelid].color}">
<input (click)="changeLabel(labelid)" type="radio" name="labelSelector" value="{{ labelid }}" [checked]="labelid == 1">

Answer Source

The difference is that the later is converted to the former internally.

They are equivalent but the former is more convenient to write.

The explicit version (<template ngFor ...>) allows to apply the directive to multiple elements at once while the implicit version (shorthand) only wraps the element where it is applied to with the <template> tag.

With Angular 2.0.0 final the <ng-container> element was added that allows to use the shorthand syntax on an element that behaves like the <template> element (is not added to the DOM).

See also