ngx-lazy-ngfor - Angular

Ngx lazy ngFor is a Typescript library for make angular ngFor lazy, and triggered by scroll event.

Dependencies

• Angular (requires Angular 13+)

Installation

Install above dependencies via npm, run:

1npm install --save ngx-lazy-ngfor

---

Once installed you need to import the main module:

1import { NgxLazyNgforModule } from 'ngx-lazy-ngfor';
2
3
4@NgModule({
5  declarations: [AppComponent, ...],
6  imports: [NgxLazyNgforModule],
7  bootstrap: [AppComponent]
8})
9export class AppModule {
10}

Usage

The library uses only one structural directive *lazyFor, and one attribute directive [lazySize]

LazyFor Directive

---

Use this directive to reveal in batches your DOM list upon scroll.

Basic Usage

1<parentElement>
2  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
3</parentElement>

Parent element must be scrollable vertically.

You could use the same functionalities of Angular *ngFor

With Custom Options

As default, you will have 10 elements size list in your viewport, and it will use 10 elements size batches. You can also pass in a custom size configuration to the directive, from its parent element.

1<parentElement [lazySize]="3">
2  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
3</parentElement>

This will override the default configuration used when loading de batches of list.

---

Credits

ngx-lazy-ngfor - is built by Ruben Santibañez Acosta. Put a :star2: in Github Please!