Tutorial by Examples

Angular 2 for-loop

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> <scr...

Angular 2 • Angular - ForLoop

NgFor - Markup For Loop

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. ...

Angular 2 • Angular - ForLoop

*ngFor in the Table Rows

<table> <thead> <th>Name</th> <th>Index</th> </thead> <tbody> <tr *ngFor="let hero of heroes"> <td>{{hero.name}}</td> </tr> </tbody> </tabl...

Angular 2 • Angular - ForLoop

*ngFor with component

@Component({ selector: 'main-component', template: '<example-component *ngFor="let hero of heroes" [hero]="hero"></example-component>' }) @Component({ selector: 'example-component', t...

Angular 2 • Angular - ForLoop

*ngFor X amount of items per row

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 &l...

Angular 2 • Angular - ForLoop

Page 1 of 1

1

Get monthly updates about new articles, cheatsheets, and tricks.