@@ -8,12 +8,13 @@ scroll viewport renders each item as needed when the user scrolls it into view.
8
8
render items inside of the viewport. It also requires that a ` VirtualScrollStrategy ` be provided.
9
9
The easiest way to provide a strategy is with one of the directives ` itemSize ` or ` autosize ` .
10
10
11
+ <!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
11
12
For some example usages,
12
13
[ see the demo app] ( https://github.com/angular/material2/tree/master/src/demo-app/virtual-scroll ) .
13
14
14
15
### Creating items in the viewport
15
16
` *cdkVirtualFor ` should be used instead of ` *ngFor ` to create items in the
16
- ` <cdk-virtual-scroll-viewport> ` . ` *cdkVirtualFor ` supports most of the same features as ` *ngFor ` .
17
+ ` <cdk-virtual-scroll-viewport> ` . ` *cdkVirtualFor ` supports all of the same features as ` *ngFor ` .
17
18
The simplest usage just specifies the list of items:
18
19
19
20
``` html
@@ -53,10 +54,9 @@ portion.
53
54
54
55
#### View recycling
55
56
In order to improve performance ` *cdkVirtualFor ` saves the views it creates in a cache when they are
56
- no longer needed. This way the next time a new view is needed once can be recycled from the cache
57
+ no longer needed. This way the next time a new view is needed one can be recycled from the cache
57
58
rather than being created from scratch. The size of this cache can be adjusted using the
58
- ` templateCacheSize ` input. The cache size defaults to ` 20 ` and caching can be disabled by setting it
59
- to ` 0 ` .
59
+ ` templateCacheSize ` input. Caching can be disabled by setting it to ` 0 ` .
60
60
61
61
``` html
62
62
<cdk-virtual-scroll-viewport itemSize =" 50" >
@@ -85,8 +85,7 @@ directive.
85
85
```
86
86
87
87
The fixed size strategy also supports setting the buffer size, i.e. the number of items rendered
88
- beyond the edge of the viewport. This can be adjusted by setting the ` bufferSize ` input. If not
89
- specified, the ` bufferSize ` defaults to ` 5 ` .
88
+ beyond the edge of the viewport. This can be adjusted by setting the ` bufferSize ` input.
90
89
91
90
``` html
92
91
<cdk-virtual-scroll-viewport itemSize =" 50" bufferSize =" 1" >
@@ -97,6 +96,10 @@ specified, the `bufferSize` defaults to `5`.
97
96
** Note: The fixed size strategy will likely be changed to allow specifying a separate
98
97
` minBufferPx ` and ` addBufferPx ` like the autosize strategy**
99
98
99
+ The fixed size viewport strategy is less flexible than the autosize strategy because it requires all
100
+ items to be the same size, but the advantage of this constraint is that it allows for better
101
+ performance, since items do not need to be measured as they are rendered.
102
+
100
103
### Scrolling over items with different sizes
101
104
If you're scrolling over a list of items with different sizes, you can use the
102
105
` AutoSizeVirtualScrollStrategy ` . This can be added to your viewport by using the ` autosize `
@@ -114,7 +117,7 @@ should try to maintain on either side of the viewport. The `addBufferPx` is the
114
117
(in pixels) that the viewport should try to render out when it detects that the buffer has dropped
115
118
below the ` minBufferPx ` . It's helpful for this to be a little larger than the ` minBufferPx ` as it
116
119
allows the viewport to render out new buffer items in batches rather than constantly needing to
117
- render new ones. By default the ` minBufferPx ` is ` 100 ` and the default ` addBufferPx ` is ` 200 ` .
120
+ render new ones.
118
121
119
122
``` html
120
123
<cdk-virtual-scroll-viewport autosize minBufferPx =" 50" addBufferPx =" 100" >
0 commit comments