Angular 2 – *ngFor – What’s the magic behind * (asterisk) and other mysteries..

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 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, 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}} even index :{{e}}</li>
</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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s