ngx-lazy-scroll

A simple lazy loading directive for large form elements. This will increase DOM rendering speed.

Installation instructions

Install ngx-lazy-scroll from npm:

1npm install ngx-lazy-scroll --save

Add to Modules:

1import { NgxLazyScrollModule } from 'ngx-lazy-scroll';
2
3@NgModule({
4  ...
5  imports: [NgxLazyScrollModule,...]
6  ...
7})

Usage

Add lazyScroll directive and use with slice pipe:

1<div style="max-height: 288px;overflow: scroll;" lazyScroll [limit]="limit" [heightAdjust]="'-100'" (stepEvent)="limit=$event">
2
3<div *ngFor="let element of arrays | slice:0:limit; let i=index" >
4
5  <form class="form-horizontal" >
6    <h4>Form-{{i+1}}</h4>
7    <div class="form-group">
8      <label class="control-label col-sm-2" for="email">Email:</label>
9      <div class="col-sm-10">
10        <input type="email" class="form-control" id="email" placeholder="Enter email">
11      </div>
12    </div>
13    <div class="form-group">
14      <label class="control-label col-sm-2" for="pwd">Full name:</label>
15      <div class="col-sm-10">
16        <input type="text" class="form-control" id="name" placeholder="Enter Name">
17      </div>
18    </div>
19    <div class="form-group">
20      <div class="col-sm-offset-2 col-sm-10">
21        <div class="checkbox">
22          <label><input type="checkbox"> Remember me</label>
23        </div>
24      </div>
25    </div>
26    <div class="form-group">
27      <div class="col-sm-offset-2 col-sm-10">
28        <button type="submit" class="btn btn-default">Submit</button>
29      </div>
30    </div>
31  </form>
32  </div>
33</div>