Sie sind auf Seite 1von 4

Angular 2 – *ngFor – Whatʼs the magic behind * (asterisk) and other mysteries.. | mytechnetknowhows 27.11.

18, 11(42

Angular 2 – *ngFor – Whatʼs the


magic behind * (asterisk) and
other mysteries..
August 7, 2016

In angular 1.* we used to use ng-repeat pretty heavily like

<ul>
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>

Now with angular 2 we achieve same thing with with ngFor

<ul>
<li *ngFor="let item of items">
{{item.name}}
</li>
</ul>

The let key is part of the Angular 2 template syntax. let creates a local
variable that can be referenced anywhere in our template. So in our case
we are creating a local variable let item.

What is this * for?


As you can see thereʼs no more ng-repeat, itʼs ngFor now. why the
asterisk? The answer to that is, itʼs syntactic sugar. ngFor can only be
applied to a <template>. *ngFor is the short form that can be applied to
any element and the <template> element is created implicitly behind the
scene. The * makes it easier to read and write directives that modify

https://mytechnetknowhows.wordpress.com/2016/08/07/angular-2-ngfor-whats-the-magic-behind-asterisk-and-other-mysteries/ Seite 1 von 4


Angular 2 – *ngFor – Whatʼs the magic behind * (asterisk) and other mysteries.. | mytechnetknowhows 27.11.18, 11(42

HTML layout with the help of templates. NgFor, NgIf, and NgSwitch all add
and remove element subtrees that are wrapped in<template> tags.

The HTML template element <template> is a mechanism for holding


client-side content that is not to be rendered when a page is loaded but
may subsequently be instantiated during run time using JavaScript. Think
of a template as a content fragment that is being stored for subsequent
use in the document.

*ngFor undergoes a transformation like shown below

<ul>
<li *ngFor="let item of items;" [item]="item"></li>
</ul>

Hereʼs the same after transporting the ngFor to the template directive:

<ul>
<li template="ngFor let item of items;" [item]="item"></li>
</ul>

And here it is expanded further into a tag wrapping the original element:

<ul>
<template ngFor let-item [ngForOf]="items">
<li [item]="item">{{item.name}}</li </template>
</ul>

When Angular sees the asterisk (*) in ngFor, it will use its DOM element
as template to render the loop.

Moreover *ngFor has more properties i.e index, first, last , even, odd we
can get the value of index per iteration, can get the last value or odd,

https://mytechnetknowhows.wordpress.com/2016/08/07/angular-2-ngfor-whats-the-magic-behind-asterisk-and-other-mysteries/ Seite 2 von 4


Angular 2 – *ngFor – Whatʼs the magic behind * (asterisk) and other mysteries.. | mytechnetknowhows 27.11.18, 11(42

even index too using local variables. here is working example for the
same:

<ul>
<li *ngFor='let item of items #i=index #l=last #e=even '>
Item value is : {{item}} has index value is : {{i}} and last value is :{{l}} e
</ul>

NgFor provides several exported values that can be aliased to local


variables:

index will be set to the current loop iteration for each template
context.
first will be set to a boolean value indicating whether the item is the
first one in the iteration.
last will be set to a boolean value indicating whether the item is the
last one in the iteration.
even will be set to a boolean value indicating whether this item has
an even index.
odd will be set to a boolean value indicating whether this item has an
odd index.

Angular 2 also includes the trackBy feature from Angular 1.x that allows
performance improvements in our list rendering by tracking a unique
identifier on our list items.

<ul>
<li *ngFor="let item of item; trackBy:item.id;">
{{$index}} {{item}}
</li>
</ul>

Advertisements

https://mytechnetknowhows.wordpress.com/2016/08/07/angular-2-ngfor-whats-the-magic-behind-asterisk-and-other-mysteries/ Seite 3 von 4


Angular 2 – *ngFor – Whatʼs the magic behind * (asterisk) and other mysteries.. | mytechnetknowhows 27.11.18, 11(42

Related

Mystery behind track by in ng-repeatIn "AngularJS"


Mystery between $scope.apply(); and $scope.apply(function(){})In
"AngularJS"
Angular 2 - Pipes passing multiple filters to PipesIn "Angular 2.0"

https://mytechnetknowhows.wordpress.com/2016/08/07/angular-2-ngfor-whats-the-magic-behind-asterisk-and-other-mysteries/ Seite 4 von 4