Angular 2+ directive that takes an iterable and renders visible items to the DOM
lazyFor
is an Angular 2+ directive that can be used in place of ngFor
. The main difference is that lazyFor
will only render items when they are visible in the parent element. So as a user scrolls, items that are no longer visible will be removed from the DOM and new items will be rendered to the DOM.
Install with npm install --save angular-lazy-for
app.module.ts
import {NgModule} from '@angular/core';
import {LazyForModule} from 'angular-lazy-for';
@NgModule({
declarations: [/*...*/],
imports: [
//...
LazyForModule
],
providers: [/*...*/],
bootstrap: [/*...*/]
})
export class AppModule {
}
Template Input
<ul style="height: 30px; overflow-y: auto">
<li *lazyFor="let item of [1,2,3,4,5,6]" style="height: 10px;">
{{item}}
</li>
</ul>
DOM Output
<ul>
<li style="height: 20px"></li>
<li>3</li>
<li>4</li>
<li>5</li>
<li style="height: 10px"></li>
</ul>
lazyFor
lazyFor
ngFor
in all cases. Only use lazyFor
if you have performance issueslazyFor
can improve performance by preventing unnecessary content from being rendered to the DOM. This also leads to fewer bindings which reduces the load on change detection. Using ngFor
is usually very fast but here is a casae where it has a noticeable performance impact:
This directive will try to figure out the height of each element and use that number to calculate the amount of spacing above and below the items. If you are having issues with the defualt behaviour you can specify an explicit height in pixels.
<div *lazyFor="let item of items, withHeight 30"></div>
lazyFor
needs to know which element is the scrollable container the items will be inside of. By default it will use the parent element but if this is not the right element you can explicitly specify the container.
<div style="overflow: auto" #myContainer>
<div>
<div *lazyFor="let item of items, inContainer myContainer"></div>
</div>
</div>
This directive works by creating an empty element above and below the repeated items with a set height. By default these buffer elements will the use the same type of tag that lazyFor
is on. However you can specify a custom tag name with this parameter if needed.
Template
<ul>
<li *lazyFor="let item of items, withTagName 'div'"></li>
<ul>
DOM Output
<ul>
<div height="..."></div>
<li></li>
<li></li>
<li></li>
<div height="..."></div>
<ul>