/** * @license * Copyright Google Inc. All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.io/license */ import {ChangeDetectorRef, CollectionChangeRecord, DefaultIterableDiffer, Directive, DoCheck, EmbeddedViewRef, Input, IterableDiffer, IterableDiffers, OnChanges, SimpleChanges, TemplateRef, TrackByFn, ViewContainerRef} from '@angular/core'; import {getTypeNameForDebugging} from '../facade/lang'; export class NgForRow { constructor(public $implicit: any, public index: number, public count: number) {} get first(): boolean { return this.index === 0; } get last(): boolean { return this.index === this.count - 1; } get even(): boolean { return this.index % 2 === 0; } get odd(): boolean { return !this.even; } } /** * 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. * * ### Local Variables * * `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. * * ### Change Propagation * * When the contents of the iterator changes, `NgFor` makes the corresponding changes to the DOM: * * * When an item is added, a new instance of the template is added to the DOM. * * When an item is removed, its template instance is removed from the DOM. * * When items are reordered, their respective templates are reordered in the DOM. * * Otherwise, the DOM element for that item will remain the same. * * Angular uses object identity to track insertions and deletions within the iterator and reproduce * those changes in the DOM. This has important implications for animations and any stateful * controls * (such as `` elements which accept user input) that are present. Inserted rows can be * animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state such * as user input. * * It is possible for the identities of elements in the iterator to change while the data does not. * This can happen, for example, if the iterator produced from an RPC to the server, and that * RPC is re-run. Even if the data hasn't changed, the second response will produce objects with * different identities, and Angular will tear down the entire DOM and rebuild it (as if all old * elements were deleted and all new elements inserted). This is an expensive operation and should * be avoided if possible. * * 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. * * ### Syntax * * - `