1
|
/**
|
2
|
* @license
|
3
|
* Copyright Google Inc. All Rights Reserved.
|
4
|
*
|
5
|
* Use of this source code is governed by an MIT-style license that can be
|
6
|
* found in the LICENSE file at https://angular.io/license
|
7
|
*/
|
8
|
import { DoCheck, IterableDiffers, NgIterable, OnChanges, SimpleChanges, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
|
9
|
/**
|
10
|
* @stable
|
11
|
*/
|
12
|
export declare class NgForOfContext<T> {
|
13
|
$implicit: T;
|
14
|
ngForOf: NgIterable<T>;
|
15
|
index: number;
|
16
|
count: number;
|
17
|
constructor($implicit: T, ngForOf: NgIterable<T>, index: number, count: number);
|
18
|
readonly first: boolean;
|
19
|
readonly last: boolean;
|
20
|
readonly even: boolean;
|
21
|
readonly odd: boolean;
|
22
|
}
|
23
|
/**
|
24
|
* The `NgForOf` directive instantiates a template once per item from an iterable. The context
|
25
|
* for each instantiated template inherits from the outer context with the given loop variable
|
26
|
* set to the current item from the iterable.
|
27
|
*
|
28
|
* ### Local Variables
|
29
|
*
|
30
|
* `NgForOf` provides several exported values that can be aliased to local variables:
|
31
|
*
|
32
|
* - `$implicit: T`: The value of the individual items in the iterable (`ngForOf`).
|
33
|
* - `ngForOf: NgIterable<T>`: The value of the iterable expression. Useful when the expression is
|
34
|
* more complex then a property access, for example when using the async pipe (`userStreams |
|
35
|
* async`).
|
36
|
* - `index: number`: The index of the current item in the iterable.
|
37
|
* - `first: boolean`: True when the item is the first item in the iterable.
|
38
|
* - `last: boolean`: True when the item is the last item in the iterable.
|
39
|
* - `even: boolean`: True when the item has an even index in the iterable.
|
40
|
* - `odd: boolean`: True when the item has an odd index in the iterable.
|
41
|
*
|
42
|
* ```
|
43
|
* <li *ngFor="let user of userObservable | async as users; index as i; first as isFirst">
|
44
|
* {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
|
45
|
* </li>
|
46
|
* ```
|
47
|
*
|
48
|
* ### Change Propagation
|
49
|
*
|
50
|
* When the contents of the iterator changes, `NgForOf` makes the corresponding changes to the DOM:
|
51
|
*
|
52
|
* * When an item is added, a new instance of the template is added to the DOM.
|
53
|
* * When an item is removed, its template instance is removed from the DOM.
|
54
|
* * When items are reordered, their respective templates are reordered in the DOM.
|
55
|
* * Otherwise, the DOM element for that item will remain the same.
|
56
|
*
|
57
|
* Angular uses object identity to track insertions and deletions within the iterator and reproduce
|
58
|
* those changes in the DOM. This has important implications for animations and any stateful
|
59
|
* controls (such as `<input>` elements which accept user input) that are present. Inserted rows can
|
60
|
* be animated in, deleted rows can be animated out, and unchanged rows retain any unsaved state
|
61
|
* such as user input.
|
62
|
*
|
63
|
* It is possible for the identities of elements in the iterator to change while the data does not.
|
64
|
* This can happen, for example, if the iterator produced from an RPC to the server, and that
|
65
|
* RPC is re-run. Even if the data hasn't changed, the second response will produce objects with
|
66
|
* different identities, and Angular will tear down the entire DOM and rebuild it (as if all old
|
67
|
* elements were deleted and all new elements inserted). This is an expensive operation and should
|
68
|
* be avoided if possible.
|
69
|
*
|
70
|
* To customize the default tracking algorithm, `NgForOf` supports `trackBy` option.
|
71
|
* `trackBy` takes a function which has two arguments: `index` and `item`.
|
72
|
* If `trackBy` is given, Angular tracks changes by the return value of the function.
|
73
|
*
|
74
|
* ### Syntax
|
75
|
*
|
76
|
* - `<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>`
|
77
|
* - `<li template="ngFor let item of items; index as i; trackBy: trackByFn">...</li>`
|
78
|
*
|
79
|
* With `<ng-template>` element:
|
80
|
*
|
81
|
* ```
|
82
|
* <ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
|
83
|
* <li>...</li>
|
84
|
* </ng-template>
|
85
|
* ```
|
86
|
*
|
87
|
* ### Example
|
88
|
*
|
89
|
* See a [live demo](http://plnkr.co/edit/KVuXxDp0qinGDyo307QW?p=preview) for a more detailed
|
90
|
* example.
|
91
|
*
|
92
|
* @stable
|
93
|
*/
|
94
|
export declare class NgForOf<T> implements DoCheck, OnChanges {
|
95
|
private _viewContainer;
|
96
|
private _template;
|
97
|
private _differs;
|
98
|
ngForOf: NgIterable<T>;
|
99
|
ngForTrackBy: TrackByFunction<T>;
|
100
|
private _differ;
|
101
|
private _trackByFn;
|
102
|
constructor(_viewContainer: ViewContainerRef, _template: TemplateRef<NgForOfContext<T>>, _differs: IterableDiffers);
|
103
|
ngForTemplate: TemplateRef<NgForOfContext<T>>;
|
104
|
ngOnChanges(changes: SimpleChanges): void;
|
105
|
ngDoCheck(): void;
|
106
|
private _applyChanges(changes);
|
107
|
private _perViewChange(view, record);
|
108
|
}
|
109
|
/**
|
110
|
* @deprecated from v4.0.0 - Use NgForOf<any> instead.
|
111
|
*/
|
112
|
export declare type NgFor = NgForOf<any>;
|
113
|
/**
|
114
|
* @deprecated from v4.0.0 - Use NgForOf instead.
|
115
|
*/
|
116
|
export declare const NgFor: typeof NgForOf;
|
117
|
export declare function getTypeNameForDebugging(type: any): string;
|