Skip to content

Commit 373df73

Browse files
committed
address comments
1 parent ddedf86 commit 373df73

File tree

4 files changed

+20
-8
lines changed

4 files changed

+20
-8
lines changed

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -425,6 +425,7 @@ export class CdkAutoSizeVirtualScroll implements OnChanges {
425425
/**
426426
* The minimum amount of buffer rendered beyond the viewport (in pixels).
427427
* If the amount of buffer dips below this number, more items will be rendered.
428+
* The default minBufferPx is 100.
428429
*/
429430
@Input()
430431
get minBufferPx(): number { return this._minBufferPx; }
@@ -435,6 +436,7 @@ export class CdkAutoSizeVirtualScroll implements OnChanges {
435436
* The number of pixels worth of buffer to shoot for when rendering new items.
436437
* If the actual amount turns out to be less it will not necessarily trigger an additional
437438
* rendering cycle (as long as the amount of buffer is still greater than `minBufferPx`).
439+
* The default add buffer px is 200.
438440
*/
439441
@Input()
440442
get addBufferPx(): number { return this._addBufferPx; }

src/cdk-experimental/scrolling/fixed-size-virtual-scroll.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,10 @@ export class CdkFixedSizeVirtualScroll implements OnChanges {
150150
set itemSize(value: number) { this._itemSize = coerceNumberProperty(value); }
151151
_itemSize = 20;
152152

153-
/** The number of extra elements to render on either side of the scrolling viewport. */
153+
/**
154+
* The number of extra elements to render on either side of the scrolling viewport.
155+
* The default buffer size is 5.
156+
*/
154157
@Input()
155158
get bufferSize(): number { return this._bufferSize; }
156159
set bufferSize(value: number) { this._bufferSize = coerceNumberProperty(value); }

src/cdk-experimental/scrolling/virtual-for-of.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,10 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
109109
}
110110
}
111111

112+
/**
113+
* The size of the cache used to store templates that are not being used for re-use later.
114+
* Setting the cache size to `0` will disable caching. The default cache size is 20.
115+
*/
112116
@Input() cdkVirtualForTemplateCacheSize: number = 20;
113117

114118
/** Emits whenever the data in the current DataSource changes. */

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ scroll viewport renders each item as needed when the user scrolls it into view.
88
render items inside of the viewport. It also requires that a `VirtualScrollStrategy` be provided.
99
The 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 -->
1112
For 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`.
1718
The simplest usage just specifies the list of items:
1819

1920
```html
@@ -53,10 +54,9 @@ portion.
5354

5455
#### View recycling
5556
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
5758
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`.
6060

6161
```html
6262
<cdk-virtual-scroll-viewport itemSize="50">
@@ -85,8 +85,7 @@ directive.
8585
```
8686

8787
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.
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
101104
If 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
115118
below the `minBufferPx`. It's helpful for this to be a little larger than the `minBufferPx` as it
116119
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.
118121

119122
```html
120123
<cdk-virtual-scroll-viewport autosize minBufferPx="50" addBufferPx="100">

0 commit comments

Comments
 (0)