Geek Answers Handbook

What types of loops exist in Angular 2?

What are the types of loops that exist in Angular 2?

I could only find for and foreach , but it's hard for me to find others. Is there a list somewhere?

Are there any examples anywhere? This will help in understanding very much.

[EDIT]: Basically, I am looking for a list of all types of loops in Angular 2.

[EDIT 2]: I really mean the loops specific to Angular 2 in the template section (Sorry, I didn't know there were so many possibilities). To give an example using * ngFor:

 <ul class="contacts"> <li *ngFor="#contact of contacts" (click)="onSelectContact(contact)" [class.selectedContact]="contact === selectedContact"> <span class="badge">{{contact.id}}</span> {{contact.name}} </li> </ul>
+6
source share
4 answers

The only template loop directive in Angular 2 is ngFor , and it only works with iterators, usually arrays. (In Angular 1, ng-repeat will also work with objects, but Angular 2 does not work.)

You can use pipe to format, filter, sort, etc. before displaying it.

+4
source

You can use the ngFor directive in Angular 2 to loop / iterate.

Like this

<li *ngFor="#item of items; #i = index">...</li>

The documentation for this directive can be found here https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

And an example of this is done in the developer guides on the Angular 2 website https://angular.io/docs/ts/latest/guide/displaying-data.html#!#showing-an-array-property-with-ngfor

+3
source

Angular 2 is a JavaScript environment. hinges for JavaScript can work in Angular 2. See below using do in plunker mode

http://plnkr.co/edit/s9hfAcdjW6QU0Abj8UqQ?p=preview

 //our root app component import {Component} from 'angular2/core' @Component({ selector: 'my-app', providers: [], template: ` <div> <h2>Hello {{name}}</h2> // Output Hello Angular2 0123456789 </div> `, directives: [] }) export class App { constructor() { this.name = 'Angular2 ' this.testLoop(); } testLoop(){ var i = 0; do { this.name += i; i++; } while (i < 10); } }
+2
source

For live output click ...

Example

 <!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="#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>
0
source

More articles:


All Articles