11< ng-template #itemTemplate let-item ="item " let-index ="index ">
2- < span class ="index "> {{index}})</ span > {{item.text}}
2+ < span class ="index "> {{ index }})</ span > {{ item.text }}
33</ ng-template >
4-
5- < app-demo
6- [datasource] ="datasource "
7- [context] ="demoContext "
8- [sources] ="sources "
9- [itemTemplate] ="itemTemplate "
10- >
4+ < app-demo [datasource] ="datasource " [context] ="demoContext " [sources] ="sources " [itemTemplate] ="itemTemplate ">
115 < div actions >
126 < button (click) ="doPrepend() "> Prepend</ button >
13- < input [ngModel] ="inputPrepend " (change) ="onInputChanged(true, $any($event.target)) " size ="2 ">
14- items {{increasePrepend ? 'increasingly' : 'decreasingly'}} < input type ="checkbox " [(ngModel)] ="increasePrepend ">
15- < br >
7+ < input [ngModel] ="inputPrepend " (change) ="onInputChanged(true, $any($event.target)) " size ="2 " />
8+ items
9+ {{ increasePrepend ? 'increasingly' : 'decreasingly' }} < input type ="checkbox " [(ngModel)] ="increasePrepend " />
10+ < br />
1611 < button (click) ="doAppend() "> Append</ button >
17- < input [ngModel] ="inputAppend " (change) ="onInputChanged(false, $any($event.target)) " size ="2 ">
18- items {{decreaseAppend ? 'decreasingly' : 'increasingly'}} < input type ="checkbox " [(ngModel)] ="decreaseAppend ">
12+ < input [ngModel] ="inputAppend " (change) ="onInputChanged(false, $any($event.target)) " size ="2 " />
13+ items
14+ {{ decreaseAppend ? 'decreasingly' : 'increasingly' }} < input type ="checkbox " [(ngModel)] ="decreaseAppend " />
1915 </ div >
20-
2116 < div description >
2217 < p >
23- Along with < em > items</ em > parameter both append and prepend methods
24- have < em > eof</ em > /< em > bof</ em > parameter
25- which is optional and which prevents rendering of new items
26- when the end of the dataset (if we are speaking of < em > append</ em > ) or
27- beginning of the dataset (< em > prepend</ em > case) is not reached. See also
28- < a
29- [routerLink] ="['/', adapterScope.id] "
30- fragment ="{{adapterPropsScope.map.bofEof.id}} "
31- > bof/eof demo</ a > .
18+ The < em > append</ em > and < em > prepend</ em > methods have parameters
19+ responsible for the virtualization of inserted items:
20+ < em > eof</ em > /< em > bof</ em > and < em > virtualize</ em > .
21+ Only one of these parameters can be used at a time
22+ (setting both to < em > true</ em > simultaneously will reset both values to < em > false</ em > ).
3223 </ p >
3324 < p >
34- For example, if we call < em > {{prependCallSample}}</ em > when the beginning of the dataset is reached
35- and no more items can be fetched in the backward direction, then the new items will be injected and rendered immediately.
36- But if we are not in BOF, new items will not appear, they will be virtualized:
37- viewport backward padding element size will be increased in accordance with
38- the number of new items multiplied by the default item size.
39- The same works for < em > {{appendCallSample}}</ em > call
25+ If < em > eof</ em > /< em > bof</ em > is set to < em > true</ em > ,
26+ the items added via the < em > append</ em > /< em > prepend</ em > methods will be virtualized
27+ and will not appear in the DOM if, at the time of insertion,
28+ we are not at the beginning (in the case of prepend-bof)
29+ or at the end (in the case of append-eof) of the list.
30+ See also < a [routerLink] ="['/', adapterScope.id] " fragment ="{{ adapterPropsScope.map.bofEof.id }} "> bof/eof demo</ a > .
31+ </ p >
32+ < p >
33+ For example, if we call < em > {{ prependCallSample }}</ em > when the
34+ beginning of the dataset is reached and no more items can be fetched in
35+ the backward direction, then the new items will be injected and rendered
36+ immediately. But if we are not in BOF, new items will not appear, they
37+ will be virtualized: viewport backward padding element size will be
38+ increased in accordance with the number of new items multiplied by the
39+ default item size. The same works for < em > {{ appendCallSample }}</ em > call
4040 adjusted for forward direction and forward padding element.
4141 </ p >
4242 < p >
43- Indexes increase by default when < em > Adapter.append</ em > and
44- decrease by default when < em > Adapter.prepend</ em > .
45- The indexing strategy can be changed by < em > decrease</ em > /< em > increase</ em > params.
46- They are boolean and set to < em > false</ em > by default.
47- For example, if we call < em > {{prependIncreaseCallSample}}</ em > ,
48- the topmost index remains unchanged, prepended items start with the topmost index,
49- the rest indexes are incremented.
43+ If < em > virtualize</ em > is set to < em > true</ em > , the added rows will be virtualized in any case,
44+ even if we are at the beginning or end of the list.
45+ </ p >
46+ < p >
47+ Indexes increase by default when < em > Adapter.append</ em > and decrease by
48+ default when < em > Adapter.prepend</ em > . The indexing strategy can be
49+ changed by < em > decrease</ em > /< em > increase</ em > params. They are boolean
50+ and set to < em > false</ em > by default. For example, if we call
51+ < em > {{ prependIncreaseCallSample }}</ em > , the topmost index remains unchanged, prepended items start with the
52+ topmost index, the rest indexes are incremented.
5053 </ p >
5154 < p >
52- The most important idea behind the Adapter update API is that
53- the changes made via Adapter must be synched with the Datasource.
54- This demo implements one of the possible ways of synching
55- the Datasource with the Adapter.append/prepend updates.
56- The external dataset is changed per each < em > doAppend</ em > / < em > doPrepend</ em > call
57- destructively by < em > unshift</ em > and < em > push</ em > Array's methods.
58- There are also some additional variables that provide index offsets and
59- that are used in the < em > Datasource.get</ em > and doPrepend/doAppend methods
60- to guarantee a stable data flow from the App component to the Scroller.
61- Another examples of such synchronization could be found in
62- < a
63- [routerLink] ="['/', adapterScope.id] "
64- fragment ="{{adapterMethodsScope.map.remove.id}} "
65- > remove</ a > and
66- < a
67- [routerLink] ="['/', adapterScope.id] "
68- fragment ="{{adapterMethodsScope.map.insert.id}} "
69- > insert</ a > demos.
55+ The most important idea behind the Adapter update API is that the changes
56+ made via Adapter must be synched with the Datasource. This demo implements
57+ one of the possible ways of synching the Datasource with the
58+ Adapter.append/prepend updates. The external dataset is changed per each
59+ < em > doAppend</ em > / < em > doPrepend</ em > call destructively by
60+ < em > unshift</ em > and < em > push</ em > Array's methods. There are also some
61+ additional variables that provide index offsets and that are used in the
62+ < em > Datasource.get</ em > and doPrepend/doAppend methods to guarantee a
63+ stable data flow from the App component to the Scroller. Another examples
64+ of such synchronization could be found in
65+ < a [routerLink] ="['/', adapterScope.id] " fragment ="{{ adapterMethodsScope.map.remove.id }} "> remove</ a >
66+ and
67+ < a [routerLink] ="['/', adapterScope.id] " fragment ="{{ adapterMethodsScope.map.insert.id }} "> insert</ a >
68+ demos.
7069 </ p >
7170 </ div >
72- </ app-demo >
71+ </ app-demo >
0 commit comments