Angular - ForLoop All Versions
Improvements requested:
-
This topic would benefit from additional syntax notation, explanation of parameters, or remarks. – gerl Oct 6 at 2:25For the latest angular2 release, theyve deprecated the usage of @View. An alternative is the use of 'template' attribute in @Component
We are no longer accepting contributions to Documentation. Improvement requests can no longer be handled.
This draft deletes the entire topic.
Examples
-
The NgFor directive instantiates a template once per item from an iterable. The context for each instantiated template inherits from the outer context with the given loop variable set to the current item from the iterable.
To customize the default tracking algorithm, NgFor supports trackBy option. trackBy takes a function which has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.
<li *ngFor="let item of items; let i = index; trackBy: trackByFn"> {{i}} - {{item.name}} </li>
Additional Options: 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.
-
@Component({ selector: 'main-component', template: '<example-component *ngFor="let hero of heroes" [hero]="hero"></example-component>' }) @Component({ selector: 'example-component', template: '<div>{{hero?.name}}</div>' }) export class ExampleComponent { @Input() hero : Hero = null; }
-
-
Example shows 5 items per row:
<div *ngFor="let item of items; let i = index"> <div *ngIf="i % 5 == 0" class="row"> {{ item }} <div *ngIf="i + 1 < items.length">{{ items[i + 1] }}</div> <div *ngIf="i + 2 < items.length">{{ items[i + 2] }}</div> <div *ngIf="i + 3 < items.length">{{ items[i + 3] }}</div> <div *ngIf="i + 4 < items.length">{{ items[i + 4] }}</div> </div> </div>
-
For live plnkr click...
<!doctype html> <html> <head> <title>ng for loop in angular 2 with ES5.</title> <script type="text/javascript" src="https://code.angularjs.org/2.0.0-alpha.28/angular2.sfx.dev.js"></script> <script> var ngForLoop = function () { this.msg = "ng for loop in angular 2 with ES5."; this.users = ["Anil Singh", "Sunil Singh", "Sushil Singh", "Aradhya", 'Reena']; }; ngForLoop.annotations = [ new angular.Component({ selector: 'ngforloop' }), new angular.View({ template: '<H1>{{msg}}</H1>' + '<p> User List : </p>' + '<ul>' + '<li *ng-for="let user of users">' + '{{user}}' + '</li>' + '</ul>', directives: [angular.NgFor] }) ]; document.addEventListener("DOMContentLoaded", function () { angular.bootstrap(ngForLoop); }); </script> </head> <body> <ngforloop></ngforloop> <h2> <a href="http://www.code-sample.com/" target="_blank">For more detail...</a> </h2> </body> </html>
-
<table> <thead> <th>Name</th> <th>Index</th> </thead> <tbody> <tr *ngFor="let hero of heroes"> <td>{{hero.name}}</td> </tr> </tbody> </table>
Remarks
The *ngFor
structural directive runs as a loop in a collection and repeats a piece of html for each element of a collection.
@View
decorator is now deprecated. Developers should be using template
or 'templateUrl' properties for @Component
decorator.
Sign up or log in
Save edit as a guest
Join Stack Overflow
Using Google
Using Facebook
Using Email and Password
We recognize you from another Stack Exchange Network site!
Join and Save Draft