Skip to content

Commit 311bd8c

Browse files
committed
address comments
1 parent 373df73 commit 311bd8c

File tree

4 files changed

+29
-32
lines changed

4 files changed

+29
-32
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -424,8 +424,7 @@ export function _autoSizeVirtualScrollStrategyFactory(autoSizeDir: CdkAutoSizeVi
424424
export class CdkAutoSizeVirtualScroll implements OnChanges {
425425
/**
426426
* The minimum amount of buffer rendered beyond the viewport (in pixels).
427-
* If the amount of buffer dips below this number, more items will be rendered.
428-
* The default minBufferPx is 100.
427+
* If the amount of buffer dips below this number, more items will be rendered. Defaults to 100px.
429428
*/
430429
@Input()
431430
get minBufferPx(): number { return this._minBufferPx; }
@@ -436,7 +435,7 @@ export class CdkAutoSizeVirtualScroll implements OnChanges {
436435
* The number of pixels worth of buffer to shoot for when rendering new items.
437436
* If the actual amount turns out to be less it will not necessarily trigger an additional
438437
* rendering cycle (as long as the amount of buffer is still greater than `minBufferPx`).
439-
* The default add buffer px is 200.
438+
* Defaults to 200px.
440439
*/
441440
@Input()
442441
get addBufferPx(): number { return this._addBufferPx; }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export class CdkFixedSizeVirtualScroll implements OnChanges {
152152

153153
/**
154154
* The number of extra elements to render on either side of the scrolling viewport.
155-
* The default buffer size is 5.
155+
* Defaults to 5 elements.
156156
*/
157157
@Input()
158158
get bufferSize(): number { return this._bufferSize; }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export class CdkVirtualForOf<T> implements CollectionViewer, DoCheck, OnDestroy
111111

112112
/**
113113
* 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.
114+
* Setting the cache size to `0` will disable caching. Defaults to 20 templates.
115115
*/
116116
@Input() cdkVirtualForTemplateCacheSize: number = 20;
117117

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

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
**Warning: this component is still experimental. It may have bugs and the API may change at any
22
time**
33

4-
`<cdk-virtual-scroll-viewport>` is used to display a scrolling list containing a large number of
5-
items that would have a negative effect on performance if all rendered at once. Instead the virtual
6-
scroll viewport renders each item as needed when the user scrolls it into view. The
7-
`<cdk-virtual-scroll-viewport>` works together with the `*cdkVirtualFor` directive which is used to
8-
render items inside of the viewport. It also requires that a `VirtualScrollStrategy` be provided.
9-
The easiest way to provide a strategy is with one of the directives `itemSize` or `autosize`.
4+
`<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`,
6+
a virtualized replacement for `*ngFor`.
107

118
<!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
129
For some example usages,
@@ -53,10 +50,11 @@ passed to the tracking function will be the index in the data source, not the in
5350
portion.
5451

5552
#### View recycling
56-
In order to improve performance `*cdkVirtualFor` saves the views it creates in a cache when they are
57-
no longer needed. This way the next time a new view is needed one can be recycled from the cache
58-
rather than being created from scratch. The size of this cache can be adjusted using the
59-
`templateCacheSize` input. Caching can be disabled by setting it to `0`.
53+
To improve rendering performance, `*cdkVirtualFor` caches previously created views after
54+
they are no longer needed. When a new view would normally be created, a cached view
55+
is reused instead. The size of the view cache can be adjusted via the `templateCacheSize`
56+
property; setting this size to `0` disables caching. If your templates are expensive in terms of
57+
memory you may wish to reduce this number to avoid spending too much memory on the template cache.
6058

6159
```html
6260
<cdk-virtual-scroll-viewport itemSize="50">
@@ -76,7 +74,9 @@ connect process.
7674
### Scrolling over fixed size items
7775
If you're scrolling over a list of items that are all the same fixed size, you can use the
7876
`FixedSizeVirtualScrollStrategy`. This can be easily added to your viewport using the `itemSize`
79-
directive.
77+
directive. The fixed size viewport strategy is less flexible than the autosize strategy because it
78+
requires all items to be the same size, but the advantage of this constraint is that it allows for
79+
better performance, since items do not need to be measured as they are rendered.
8080

8181
```html
8282
<cdk-virtual-scroll-viewport itemSize="50">
@@ -96,10 +96,6 @@ beyond the edge of the viewport. This can be adjusted by setting the `bufferSize
9696
**Note: The fixed size strategy will likely be changed to allow specifying a separate
9797
`minBufferPx` and `addBufferPx` like the autosize strategy**
9898

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-
10399
### Scrolling over items with different sizes
104100
If you're scrolling over a list of items with different sizes, you can use the
105101
`AutoSizeVirtualScrollStrategy`. This can be added to your viewport by using the `autosize`
@@ -111,13 +107,16 @@ directive.
111107
</cdk-virtual-scroll-viewport>
112108
```
113109

114-
The `autosize` strategy allows the buffer to be configured through two inputs `minBufferPx` and
115-
`addBufferPx`. The `minBufferPx` is the minimum amount of buffer (in pixels) that the viewport
116-
should try to maintain on either side of the viewport. The `addBufferPx` is the amount of buffer
117-
(in pixels) that the viewport should try to render out when it detects that the buffer has dropped
118-
below the `minBufferPx`. It's helpful for this to be a little larger than the `minBufferPx` as it
119-
allows the viewport to render out new buffer items in batches rather than constantly needing to
120-
render new ones.
110+
The `autosize` strategy is configured through two inputs: `minBufferPx` and `addBufferPx`.
111+
112+
**`minBufferPx`** determines the minimum space outside virtual scrolling viewport that will be
113+
filled with content. Increasing this will increase the amount of content a user will see before more
114+
content must be rendered. However, too large a value will cause more content to be rendered than is
115+
necessary.
116+
117+
**`addBufferPx`** determines the amount of content that will be added incrementally as the viewport
118+
is scrolled. This should be greater than the size of `minBufferPx` so that one "render" is needed at
119+
a time.
121120

122121
```html
123122
<cdk-virtual-scroll-viewport autosize minBufferPx="50" addBufferPx="100">
@@ -128,11 +127,10 @@ render new ones.
128127
Because the auto size strategy needs to measure the size of the elements, its performance may not
129128
be as good as the fixed size strategy.
130129

131-
### Setting the viewport orientation
132-
The orientation of the viewport can be adjusted by using the `orientation` input. It defaults to
133-
`vertical` which virtualizes scrolling along the y-axis. It can be set to `horizontal` to virtualize
134-
scrolling along the x-axis. If you use this option you need to make sure that the content is
135-
actually laid out so that it extends along the x-axis. To do this you may want to target CSS at
130+
### Viewport orientation
131+
The virtual-scroll viewport defaults to a vertical orientation, but can also be set to
132+
`orientation="horizontal"`. When changing the orientation, ensure that the item are laid
133+
out horizontally via CSS. To do this you may want to target CSS at
136134
`.cdk-virtual-scroll-content-wrapper` which is the wrapper element that contains the rendered
137135
content.
138136

0 commit comments

Comments
 (0)