NgxLazyLoad

Angular directive to load contents lazily. Can use make API calls and load contents based on the visibility of an element

Install

npm i ngx-lazy-load

Params

• throttlingTime | Type : number | Default Value : 1000 (ms) | Represents the amount of time the element need to be in viewport to lazy load contents

• threshold | type : number | Default Value : 1 | Range : 0 to 1 | Represents the percentage of element should be visible to lazy load contents

Events

• visit : Triggered when the element is visible within the container

Usage

// app.module.ts

import { NgxLazyLoadModule } from 'ngx-lazy-load';

@NgModule({
  
  imports: [
    .....

    NgxLazyLoadModule

    .....
  ]
})
export class AppModule { }

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'test-app';

  loaded() {
    // Loagic to load contents or make API calls
  }
}

// app.component.html

// add canLoad directive and event in the container 

// add optional throttlingTime and threshold parameters

<div class="test-div" canLoad (visible)="loaded()" throttlingTime="100" threshold=".5"> // 

</div>

Author

👤 Athul Narayanan

Show your support

Give a ⭐️ if this project helped you!