2
2
time**
3
3
4
4
` <cdk-virtual-scroll-viewport> ` displays large lists of elements performantly by only
5
- rendering the items that appear on-screen. This components works with ` *cdkVirtualFor ` ,
5
+ rendering the items that fit on-screen. This components works with ` *cdkVirtualFor ` ,
6
6
a virtualized replacement for ` *ngFor ` .
7
7
8
8
<!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
9
9
For some example usages,
10
10
[ see the demo app] ( https://github.com/angular/material2/tree/master/src/demo-app/virtual-scroll ) .
11
11
12
12
### Creating items in the viewport
13
- ` *cdkVirtualFor ` should be used instead of ` *ngFor ` to create items in the
14
- ` <cdk-virtual-scroll-viewport> ` . ` *cdkVirtualFor ` supports all of the same features as ` *ngFor ` .
13
+ ` *cdkVirtualFor ` replaces ` *ngFor ` inside of a ` <cdk-virtual-scroll-viewport> ` , supporting the exact
14
+ same API as [ ` *ngFor ` ] ( https://angular.io/api/common/NgForOf ) .
15
15
The simplest usage just specifies the list of items:
16
16
17
17
``` html
@@ -21,12 +21,15 @@ The simplest usage just specifies the list of items:
21
21
```
22
22
23
23
` *cdkVirtualFor ` makes the following context variables available to the template:
24
- * ` index ` - The index of the item in the data source.
25
- * ` count ` - The total number of items in the data source.
26
- * ` first ` - Whether this is the first item in the data source.
27
- * ` last ` - Whether this is the last item in the data source.
28
- * ` even ` - Whether the ` index ` is even.
29
- * ` odd ` - Whether the ` index ` is odd.
24
+
25
+ | Context variable | Description |
26
+ | ------------------| ----------------------------------------------------|
27
+ | ` index ` | The index of the item in the data source. |
28
+ | ` count ` | The total number of items in the data source. |
29
+ | ` first ` | Whether this is the first item in the data source. |
30
+ | ` last ` | Whether this is the last item in the data source. |
31
+ | ` even ` | Whether the ` index ` is even. |
32
+ | ` odd ` | Whether the ` index ` is odd. |
30
33
31
34
All of these apply to the index of the item in the data source, not the index in the rendered
32
35
portion of the data.
@@ -35,12 +38,8 @@ portion of the data.
35
38
<cdk-virtual-scroll-viewport itemSize =" 50" >
36
39
<div *cdkVirtualFor =" let item of items;
37
40
let index = index;
38
- let count = count;
39
- let first = first;
40
- let last = last;
41
- let even = even;
42
- let odd = odd" >
43
- {{item}} - {{index}} - {{count}} - {{first}} - {{last}} - {{even}} - {{odd}}
41
+ let count = count" >
42
+ {{item}} ({{index}} of {{count}})
44
43
</div >
45
44
</cdk-virtual-scroll-viewport >
46
45
```
0 commit comments