22time**
33
44` <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 ` ,
66a virtualized replacement for ` *ngFor ` .
77
88<!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
99For some example usages,
1010[ see the demo app] ( https://github.com/angular/material2/tree/master/src/demo-app/virtual-scroll ) .
1111
1212### 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 ) .
1515The simplest usage just specifies the list of items:
1616
1717``` html
@@ -21,12 +21,15 @@ The simplest usage just specifies the list of items:
2121```
2222
2323` *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. |
3033
3134All of these apply to the index of the item in the data source, not the index in the rendered
3235portion of the data.
@@ -35,12 +38,8 @@ portion of the data.
3538<cdk-virtual-scroll-viewport itemSize =" 50" >
3639 <div *cdkVirtualFor =" let item of items;
3740 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}})
4443 </div >
4544</cdk-virtual-scroll-viewport >
4645```
0 commit comments