Getting started with Angular 2 Dynamically add components using ViewContainerRef.createComponent Pipes Routing (3.0.0+)Http Interceptor Directives Installing 3rd party plugins with [email protected]Testing an Angular 2 App Routing Optimizing rendering using ChangeDetectionStrategy Lifecycle Hooks Directives & components : @Input @Output Angular RXJS Subjects and Observables with API requests Zone.js Services and Dependency Injection Angular 2 Forms Update Detecting resize events Bootstrap Empty module in angular 2 Advanced Component Examples Bypassing Sanitizing for trusted values Angular2 Custom Validations Angular 2 Data Driven Forms Angular - ForLoop Feature Modules Angular2 In Memory Web API Ahead-of-time (AOT) compilation with Angular 2 Debugging Angular2 typescript application using Visual Studio Code CRUD in Angular2 with Restful API Component interactions Use native webcomponents in Angular 2 Lazy loading a module Update typings Mocking @ngrx/Store How to use ngfor ngrx Animation Commonly built-in directives and services How to Use ngif Testing ngModel Create an Angular 2+ NPM package Angular2 CanActivate Angular 2 - Protractor Example for routes such as /route/subroute for static urls Angular2 Input() output()Page title unit testing Angular-cli OrderBy Pipe Angular2 Animations Angular 2 Change detection and manual triggering Angular2 Databinding Brute Force Upgrading EventEmitter Service Angular2 provide external data to App before bootstrap Using third party libraries like jQuery in Angular 2 Component interactions Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.Templates Configuring ASP.net Core application to work with Angular 2 and TypeScript Angular2 using webpack Angular material design Dropzone in Angular2 custom ngx-bootstrap datepicker + input angular redux Creating an Angular npm library Barrel angular-cli test coverage Service Worker Components Modules

Angular - ForLoop

Remarks:

The *ngFor structural directive runs as a loop in a collection and repeats a piece of html for each element of a collection.

@View decorator is now deprecated. Developers should be using template or 'templateUrl' properties for @Component decorator.

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>
    <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="let 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>

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. trackBy takes a function which has two arguments: index and item. If trackBy is given, Angular tracks changes by the return value of the function.

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">
    {{i}} - {{item.name}}
</li>

Additional Options: NgFor provides several exported values that can be aliased to local variables:

index will be set to the current loop iteration for each template context.
first will be set to a boolean value indicating whether the item is the first one in the iteration.
last will be set to a boolean value indicating whether the item is the last one in the iteration.
even will be set to a boolean value indicating whether this item has an even index.
odd will be set to a boolean value indicating whether this item has an odd index.

*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>
</table>

*ngFor with component

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


   @Component({
      selector: 'example-component',
      template: '<div>{{hero?.name}}</div>'
   })

   export class ExampleComponent {
     @Input() hero : Hero = null;
   }

*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 < items.length">{{ items[i + 2] }}</div>
    <div *ngIf="i + 3 < items.length">{{ items[i + 3] }}</div>
    <div *ngIf="i + 4 < items.length">{{ items[i + 4] }}</div>
  </div>
</div>

Syntax:

< div *ngFor="let item of items; let i = index">{{i}} {{item}}</ div>

Contributors

Topic Id: 6543

Example Ids: 23499,26019,27202,27731,32251

This site is not affiliated with any of the contributors.