Import
import { InfiniteScrollModule } from '@backbase/ui-ang/infinite-scroll'
Usage
Use the bb-infinite-scroll-ui component to wrap content that should support infinite scrolling.
<!-- Basic infinite scroll usage -->
<bb-infinite-scroll-ui (scrollEnd)="loadMore()">
<!-- Content here -->
</bb-infinite-scroll-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
ariaLabel |
string |
'Infinite scrolling content' |
|
debounce |
number |
100 |
|
disableScrollEnd |
boolean |
false |
|
focusable |
boolean |
true |
|
isLoading |
boolean |
false |
|
offset |
number |
0 |
|
scrollContainer |
string |
'.infinite-scroll-wrapper' |
|
role |
string |
undefined |
ariaLabel
The ariaLabel input sets the accessible label for the scrollable container. Defaults to 'Infinite scrolling content'.
<!-- Infinite scroll with custom aria label -->
<bb-infinite-scroll-ui ariaLabel="Transaction list"></bb-infinite-scroll-ui>
debounce
The debounce input specifies the debounce duration in milliseconds for the scroll event. Defaults to 100.
<!-- Infinite scroll with custom debounce -->
<bb-infinite-scroll-ui [debounce]="200"></bb-infinite-scroll-ui>
disableScrollEnd
The disableScrollEnd input disables the emission of the scrollEnd event when set to true. Defaults to false.
<!-- Infinite scroll with scroll end disabled -->
<bb-infinite-scroll-ui [disableScrollEnd]="true"></bb-infinite-scroll-ui>
focusable
The focusable input sets whether the component is focusable. Defaults to true.
<!-- Infinite scroll not focusable -->
<bb-infinite-scroll-ui [focusable]="false"></bb-infinite-scroll-ui>
isLoading
The isLoading input indicates the loading state of the data. When true, the scroll position is maintained at the bottom. Defaults to false.
<!-- Infinite scroll with loading state -->
<bb-infinite-scroll-ui [isLoading]="true"></bb-infinite-scroll-ui>
offset
The offset input sets the number of pixels from the bottom of the element at which to trigger the scrollEnd event. Defaults to 0.
<!-- Infinite scroll with custom offset -->
<bb-infinite-scroll-ui [offset]="50"></bb-infinite-scroll-ui>
role
The ARIA role for the infinite scroll container. When set, it provides semantic meaning to the container for assistive technologies.
scrollContainer
The scrollContainer input specifies a CSS class selector to identify the scrolling element. Defaults to '.infinite-scroll-wrapper'.
<!-- Infinite scroll with custom scroll container -->
<bb-infinite-scroll-ui scrollContainer=".custom-scroll-container"></bb-infinite-scroll-ui>
Outputs
|
Output |
Type |
Description |
|---|---|---|
|
scrollEnd |
EventEmitter<void> |
Emitted when the user has scrolled to the bottom of the element |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
- The scrollable container uses the aria-label attribute to provide an accessible name.
- The focusable input allows the container to be included or excluded from keyboard navigation.
- Ensure that the content within the infinite scroll is accessible and that keyboard users can reach all interactive elements.