Skip to main content

BaseListComponent

This is a base class which implements the logic required to fetch and manipulate a list of data from a query which returns a PaginatedList type.

It is normally used in combination with the DataTable2Component.

Signature
class BaseListComponent<ResultType, ItemType, VariableType extends Record<string, any> = any> implements OnInit, OnDestroy {    searchTermControl = new FormControl('');    selectionManager = new SelectionManager<any>({        multiSelect: true,        itemsAreEqual: (a, b) => a.id === b.id,        additiveMode: true,    });    result$: Observable<ResultType>;    items$: Observable<ItemType[]>;    totalItems$: Observable<number>;    itemsPerPage$: Observable<number>;    currentPage$: Observable<number>;    protected destroy$ = new Subject<void>();    protected refresh$ = new BehaviorSubject<undefined>(undefined);    protected visibleCustomFieldColumnChange$ = new Subject<        Array<DataTableCustomFieldColumnComponent<any>>    >();    constructor(router: Router, route: ActivatedRoute)    setQueryFn(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) => ;    refreshListOnChanges(streams: Array<Observable<any>>) => ;    setPageNumber(page: number) => ;    setItemsPerPage(perPage: number) => ;    setVisibleColumns(columns: Array<DataTable2ColumnComponent<any>>) => ;    refresh() => ;    setQueryParam(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;    setQueryParam(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;    setQueryParam(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) => ;}
  • Implements: OnInit, OnDestroy

searchTermControl

property

selectionManager

property

result$

propertyObservable<ResultType>

items$

propertyObservable<ItemType[]>

totalItems$

propertyObservable<number>

itemsPerPage$

propertyObservable<number>

currentPage$

propertyObservable<number>

destroy$

property

refresh$

property

visibleCustomFieldColumnChange$

property

constructor

method(router: Router, route: ActivatedRoute) => BaseListComponent

setQueryFn

method(listQueryFn: ListQueryFn<ResultType>, mappingFn: MappingFn<ItemType, ResultType>, onPageChangeFn?: OnPageChangeFn<VariableType>, defaults?: { take: number; skip: number }) =>

Sets the fetch function for the list being implemented.

refreshListOnChanges

method(streams: Array<Observable<any>>) =>

Accepts a list of Observables which will trigger a refresh of the list when any of them emit.

setPageNumber

method(page: number) =>

Sets the current page number in the url.

setItemsPerPage

method(perPage: number) =>

Sets the number of items per page in the url.

setVisibleColumns

method(columns: Array<DataTable2ColumnComponent<any>>) =>

refresh

method() =>

Re-fetch the current page of results.

setQueryParam

method(hash: { [key: string]: any }, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>

setQueryParam

method(key: string, value: any, options?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>

setQueryParam

method(keyOrHash: string | { [key: string]: any }, valueOrOptions?: any, maybeOptions?: { replaceUrl?: boolean; queryParamsHandling?: QueryParamsHandling }) =>
Was this chapter helpful?
Report Issue
Edited Feb 2, 2026·Edit this page