1
1
** Warning: this component is still experimental. It may have bugs and the API may change at any
2
2
time**
3
3
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 ` .
10
7
11
8
<!-- TODO(mmalerba): Add embedded examples once this is available in @angular/cdk -->
12
9
For some example usages,
@@ -53,10 +50,11 @@ passed to the tracking function will be the index in the data source, not the in
53
50
portion.
54
51
55
52
#### 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.
60
58
61
59
``` html
62
60
<cdk-virtual-scroll-viewport itemSize =" 50" >
@@ -76,7 +74,9 @@ connect process.
76
74
### Scrolling over fixed size items
77
75
If you're scrolling over a list of items that are all the same fixed size, you can use the
78
76
` 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.
80
80
81
81
``` html
82
82
<cdk-virtual-scroll-viewport itemSize =" 50" >
@@ -96,10 +96,6 @@ beyond the edge of the viewport. This can be adjusted by setting the `bufferSize
96
96
** Note: The fixed size strategy will likely be changed to allow specifying a separate
97
97
` minBufferPx ` and ` addBufferPx ` like the autosize strategy**
98
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
-
103
99
### Scrolling over items with different sizes
104
100
If you're scrolling over a list of items with different sizes, you can use the
105
101
` AutoSizeVirtualScrollStrategy ` . This can be added to your viewport by using the ` autosize `
@@ -111,13 +107,16 @@ directive.
111
107
</cdk-virtual-scroll-viewport >
112
108
```
113
109
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.
121
120
122
121
``` html
123
122
<cdk-virtual-scroll-viewport autosize minBufferPx =" 50" addBufferPx =" 100" >
@@ -128,11 +127,10 @@ render new ones.
128
127
Because the auto size strategy needs to measure the size of the elements, its performance may not
129
128
be as good as the fixed size strategy.
130
129
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
136
134
` .cdk-virtual-scroll-content-wrapper ` which is the wrapper element that contains the rendered
137
135
content.
138
136
0 commit comments