A short and powerful infinite scroll list library for angular, with zero dependencies 💪

• Tiny & dependency free – Only 3kb gzipped
• Render millions of items, without breaking a sweat
• Scroll to index or set the initial scroll offset
• Supports fixed or variable heights/widths
• Vertical or Horizontal lists

This library is transplanted from react-tiny-virtual-list and react-virtualized.

Check out the demo for some examples.

Getting Started

Using npm:

npm install angular-infinite-list --save

Import angular Infinite list module into your app module

import { InfiniteListModule } from 'angular-infinite-list';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    InfiniteListModule,
    ...

Wrap Infinite list tag around list items

<infinitelist
    style="width:100%"
    [width]='"100%"' 
    [height]='500' 
    [data]='data' 
    [itemSize]='50' 
    (update)='event = $event'>
        <div *ngFor="let item of event?.items; let i=index;" [ngStyle]="event.getStyle(i)">
            item{{event.start + i}} : {{item|json}}
        </div>
</infinitelist>

or directive usage
<div infinitelist [width]='"100%"' ...</div>

Higher performance usage

Because in the angular all the asynchronous operation will cause change detection.High-frequency operations such as the scroll event can cause significant performance losses.

So in some high-precision scenes, we can use rxjs Observable to solve. About angular asynchronous, change detection checks and zone.js. You can view zone.js and change detection

set @Input [useob]='true' and use ChangeDetectorRef

You can switch to the Observable mode. of course, if your scene on the efficiency requirements are not high can not do so.

demo.component.html

<infinitelist
    [width]='"100%"' 
    [height]='500' 
    [data]='data' 
    [itemSize]='150' 
    [useob]='true'
    (update)='update($event)'>
        <div class="li-con" *ngFor="let item of event?.items; let i=index;" [ngStyle]="event.getStyle(i)">
            item{{event.start + i}}
        </div>
</infinitelist>

demo.component.ts

Notice! useob mode update trigger once and otherwise it will trigger multiple times

event: ILEvent;
constructor(private cdRef: ChangeDetectorRef) { }
  
//Notice! useob mode update trigger once and otherwise it will trigger multiple times
update($event: Subject<any>) {
    $event.subscribe(x => {
		this.event = x;
      	this.cdRef.detectChanges();
	});
}

view demo code

Prop Types

* Width may only be a string when scrollDirection is 'vertical'. Similarly, Height may only be a string if scrollDirection is 'horizontal'

The IILEvent interface

export interface IILEvent {
    items: any[],
    offset: number,
    getStyle(index: number): any,
    data?: any[],
    start?: number,
    stop?: number
}

Reporting Issues

Found an issue? Please report it along with any relevant details to reproduce it.

Acknowledgments

This library is transplanted from react-tiny-virtual-list and react-virtualized. Thanks for the great works of author Claudéric Demers ❤️

License

is available under the MIT License.