Brian Leach Brian Leach - 1 month ago 12
TypeScript Question

What is the difference between ngFor and *ngFor

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

*ngIf
and
ngIf


An example of
*ngFor


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


and an example of
ngFor


<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">
</label>
</template>

Answer

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

Comments