@anguless/angulux/scroller

scroller

1 declarations2 demos

import

import { ScrollerModule } from '@anguless/angulux/scroller';

Basic

Ten thousand rows, of which only the visible ones are in the DOM.

<agl-scroller [items]="items" [itemSize]="40" scrollHeight="240px" [style]="{ width: '18rem', border: '1px solid var(--border, #e2e8f0)', borderRadius: '10px' }">    <ng-template #item let-item let-options="options">        <div style="height: 40px; display: flex; align-items: center; padding: 0 0.75rem">{{ item }}</div>    </ng-template></agl-scroller>

Horizontal

Orientation switches the axis being virtualised.

<agl-scroller [items]="items" [itemSize]="80" orientation="horizontal" [style]="{ width: '20rem', height: '4rem', border: '1px solid var(--border, #e2e8f0)', borderRadius: '10px' }">    <ng-template #item let-item>        <div style="width: 80px; height: 100%; display: flex; align-items: center; justify-content: center">{{ item }}</div>    </ng-template></agl-scroller>

API

Generated from the committed corpus, which check:corpus holds to the built library.

Scroller

componentagl-scroller, agl-virtualscroller, agl-virtual-scroller, agl-virtualScroller

Scroller is a performance-approach to handle huge data efficiently.

Input	Type	Default	Description
hostName		not documented
id	string \| undefined	not documented	Unique identifier of the element.
style	any	not documented	Inline style of the component.
styleClass	string \| undefined	not documented	Style class of the element.
tabindex		not documented	Index of the element in tabbing order.
items	any[] \| undefined \| null	not documented	An array of objects to display.
itemSize	number[] \| number	not documented	The height/width of item according to orientation.
scrollHeight	string \| undefined	not documented	Height of the scroll viewport.
scrollWidth	string \| undefined	not documented	Width of the scroll viewport.
orientation	'vertical' \| 'horizontal' \| 'both'	not documented	The orientation of scrollbar.
step	number	not documented	Used to specify how many items to load in each load method in lazy mode.
delay		not documented	Delay in scroll before new data is loaded.
resizeDelay		not documented	Delay after window's resize finishes.
appendOnly	boolean	not documented	Used to append each loaded item to top without removing any items from the DOM. Using very large data may cause the browser to crash.
inline		not documented	Specifies whether the scroller should be displayed inline or not.
lazy		not documented	Defines if data is loaded and interacted with in lazy manner.
disabled		not documented	If disabled, the scroller feature is eliminated and the content is displayed directly.
loaderDisabled		not documented	Used to implement a custom loader instead of using the loader feature in the scroller.
columns	any[] \| undefined \| null	not documented	Columns to display.
showSpacer		not documented	Used to implement a custom spacer instead of using the spacer feature in the scroller.
showLoader		not documented	Defines whether to show loader.
numToleratedItems		not documented	Determines how many additional elements to add to the DOM outside of the view. According to the scrolls made up and down, extra items are added in a certain algorithm in the form of multiples of this number. Default value is half the number of items shown in the view.
loading	boolean \| undefined	not documented	Defines whether the data is loaded.
autoSize	boolean	not documented	Defines whether to dynamically change the height or width of scrollable container.
trackBy	Function	not documented	Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.
options	ScrollerOptions \| undefined	not documented	Defines whether to use the scroller feature. The properties of scroller component can be used like an object in it.

Output	Type	Description
onLazyLoad	EventEmitter<ScrollerLazyLoadEvent>	Callback to invoke in lazy mode to load new data.
onScroll	EventEmitter<ScrollerScrollEvent>	Callback to invoke when scroll position changes.
onScrollIndexChange	EventEmitter<ScrollerScrollIndexChangeEvent>	Callback to invoke when scroll position and item's range in view changes.

Template slot	Description
<ng-template #content>	Content template of the component.
<ng-template #item>	Item template of the component.
<ng-template #loader>	Loader template of the component.
<ng-template #loadericon>	Loader icon template of the component.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.