Hello everyone, I am going to share the code sample for using of ngFor loop in angular2 with ES5.
The Table of Contents,
1. Angular 2 with ES5
2. HTML
Go for live demo punker link…
The below example is written in the old one versions of Anglar2. Now in the new versions (2.beta.17), usage of #... is deprecated! In the new versions, we are using let instead # i.e.
<div *ngFor="#user of users"> now becomes <div *ngFor="let user of users">
//The Angular 2 code with ES5 as given below var ngForLoop = function () { this.msg = "ng for loop in angular 2 with ES5."; this.users = ["Anil", "Sunil", "Sushil", "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); });
//The HTML code as given below <div> <ngforloop></ngforloop> </div>
//The Full Live (Angular 2 + HTML)demo code as given below <!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", "Sunil", "Sushil", "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> </body> </html>