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:

npm install --save ngx-lazy-ngfor

---

Once installed you need to import the main module:

import { NgxLazyNgforModule } from 'ngx-lazy-ngfor';


@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxLazyNgforModule],
  bootstrap: [AppComponent]
})
export class AppModule {
}

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

<parentElement>
  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
</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.

<parentElement [lazySize]="3">
  <div class="item" *lazyFor="let yourVariable of YourObject">..</div>
</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 🌟 in Github Please!