Observable mode

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 it 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

event: ILEvent;
constructor(private cdRef: ChangeDetectorRef) { }
  
update($event: Subject<any>) {
    $event.subscribe(x => {
      	this.event = x;
		this.cdRef.detectChanges();
	});
}

view demo code