@@ -8,12 +8,13 @@ scroll viewport renders each item as needed when the user scrolls it into view.
88render items inside of the viewport. It also requires that a ` VirtualScrollStrategy ` be provided.
99The easiest way to provide a strategy is with one of the directives ` itemSize ` or ` autosize ` .
1010
11+ <!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
1112For some example usages,
1213[ see the demo app] ( https://github.com/angular/material2/tree/master/src/demo-app/virtual-scroll ) .
1314
1415### Creating items in the viewport
1516` *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 ` .
1718The simplest usage just specifies the list of items:
1819
1920``` html
@@ -53,10 +54,9 @@ portion.
5354
5455#### View recycling
5556In 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
5758rather 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 ` .
6060
6161``` html
6262<cdk-virtual-scroll-viewport itemSize =" 50" >
@@ -85,8 +85,7 @@ directive.
8585```
8686
8787The 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.
9089
9190``` html
9291<cdk-virtual-scroll-viewport itemSize =" 50" bufferSize =" 1" >
@@ -97,6 +96,10 @@ specified, the `bufferSize` defaults to `5`.
9796** Note: The fixed size strategy will likely be changed to allow specifying a separate
9897` minBufferPx ` and ` addBufferPx ` like the autosize strategy**
9998
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+
100103### Scrolling over items with different sizes
101104If you're scrolling over a list of items with different sizes, you can use the
102105` 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
114117(in pixels) that the viewport should try to render out when it detects that the buffer has dropped
115118below the ` minBufferPx ` . It's helpful for this to be a little larger than the ` minBufferPx ` as it
116119allows 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.
118121
119122``` html
120123<cdk-virtual-scroll-viewport autosize minBufferPx =" 50" addBufferPx =" 100" >
0 commit comments