Angular2 ngFor Index | Angular2 ngfor Template - Interview Questions Angular, JavaScript, Java, PHP, SQL, C#, Vue, NodeJs, ReactJs

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>

Pin it

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2