Skip to content

Commit bc100d1

Browse files
committed
address more comments
1 parent 311bd8c commit bc100d1

File tree

1 file changed

+13
-15
lines changed

1 file changed

+13
-15
lines changed

src/cdk-experimental/scrolling/virtual-scroll.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,16 @@
22
time**
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`,
66
a virtualized replacement for `*ngFor`.
77

88
<!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
99
For 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).
1515
The simplest usage just specifies the list of items:
1616

1717
```html
@@ -21,12 +21,14 @@ 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+
| Context variable | Description |
25+
|------------------|----------------------------------------------------|
26+
| `index` | The index of the item in the data source. |
27+
| `count` | The total number of items in the data source. |
28+
| `first` | Whether this is the first item in the data source. |
29+
| `last` | Whether this is the last item in the data source. |
30+
| `even` | Whether the `index` is even. |
31+
| `odd` | Whether the `index` is odd. |
3032

3133
All of these apply to the index of the item in the data source, not the index in the rendered
3234
portion of the data.
@@ -35,12 +37,8 @@ portion of the data.
3537
<cdk-virtual-scroll-viewport itemSize="50">
3638
<div *cdkVirtualFor="let item of items;
3739
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}}
40+
let count = count">
41+
{{item}} ({{index}} of {{count}})
4442
</div>
4543
</cdk-virtual-scroll-viewport>
4644
```

0 commit comments

Comments
 (0)