npm i ngx-infinite-scroll
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { HelloComponent } from './hello.component'; import { ModalComponent } from './modal/modal.component'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; declare const chance; @NgModule({ imports: [ BrowserModule, FormsModule, InfiniteScrollModule ], declarations: [ AppComponent, HelloComponent, ModalComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
//our root app component import { Component } from "@angular/core"; const nisPackage = require("../../package.json"); @Component({ selector: "my-app", styleUrls: ["./app.component.css"], templateUrl: "./app.component.html" }) export class AppComponent { array = []; sum = 100; throttle = 300; scrollDistance = 1; scrollUpDistance = 2; direction = ""; modalOpen = false; nisVersion = nisPackage.dependencies["ngx-infinite-scroll"]; constructor() { this.appendItems(0, this.sum); } addItems(startIndex, endIndex, _method) { for (let i = 0; i < this.sum; ++i) { this.array[_method]([i, " ", this.generateWord()].join("")); } } appendItems(startIndex, endIndex) { this.addItems(startIndex, endIndex, "push"); } prependItems(startIndex, endIndex) { this.addItems(startIndex, endIndex, "unshift"); } onScrollDown(ev) { console.log("scrolled down!!", ev); // add another 20 items const start = this.sum; this.sum += 20; this.appendItems(start, this.sum); this.direction = "down"; } onUp(ev) { console.log("scrolled up!", ev); const start = this.sum; this.sum += 20; this.prependItems(start, this.sum); this.direction = "up"; } generateWord() { return chance.word(); } toggleModal() { this.modalOpen = !this.modalOpen; } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<h1 class="title well"> ngx-infinite-scroll v-{{nisVersion}} <section> <small>items: {{sum}}, now triggering scroll: {{direction}}</small> </section> <section> <button class="btn btn-info" (click)="toggleModal()">Open Infinite Scroll in Modal</button> </section> </h1> <modal *ngIf="modalOpen" (onClose)="toggleModal()"></modal> <div class="search-results" infinite-scroll [infiniteScrollDistance]="scrollDistance" [infiniteScrollUpDistance]="scrollUpDistance" [infiniteScrollThrottle]="throttle" (scrolled)="onScrollDown()" (scrolledUp)="onUp()"> <p *ngFor="let i of array"> {{ i }} </p> </div> |
FULL SOURCE CODE
