Angular 2 *ng-for loop with live demo example

Angular2 ngFor Index | Angular2 ngfor Template

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
3.      Full Live code(HTML + Angular 2 with ES5)

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>

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.