Showing posts with label Angular2 Infinite Scroll Directive. Show all posts
Showing posts with label Angular2 Infinite Scroll Directive. Show all posts
infinite-list

infinite-list

October 08, 2017
Angular2 Infinite List directive


Plunker Example

http://plnkr.co/edit/3LTMdS?p=preview

NOTICE

After 0.6.0 or higher, ng2-infinite-list has been changed to @ngui/infinite-list. Here are the changes;
  • Module ng2-infinite-list is changed to @ngui/infinite-list.
  • Direvtive ng2-infinite-list is changed to ngui-infinite-list.
  • Class name Ng2InfiniteListModule is changed to NguiInfiniteListModule.

Install

  1. install @ngui/infinite-list
     $ npm install @ngui/infinite-list --save  
    
  2. add map and packages to your systemjs.config.js
      map['@ngui/infinite-list'] = 'node_modules/@ngui/infinite-list/dist/infinite-list.umd.js';  
    
  3. import NguiInfiniteList to your AppModule
     import { NgModule } from '@angular/core';  
      import { FormsModule } from "@angular/forms";  
      import { BrowserModule } from '@angular/platform-browser';  
      import { AppComponent } from './app.component';  
      import { NguiInfiniteListModule } from '@ngui/infinite-list';  
      @NgModule({  
       imports: [BrowserModule, FormsModule, NguiInfiniteListModule],  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      })  
      export class AppModule { }  
    

Use it in your code

  <ul ngui-infinite-list class="infinite-list" [disableScrollListener]="set1.loadingInProgress"  
    (endVisible)="loadMore(set1)">  
    <li *ngFor="let item of set1.list">{{item+1}}</li>  
    <div ngui-infinite-list-end>  
     <div *ngIf="set1.loadingInProgress">Loading</div>  
     <div *ngIf="set1.endOfList">End Of List</div>  
    </div>  
   </ul>  
For full example, please check out test directory to see the example of;
  • systemjs.config.js
  • app.module.ts
  • and app.component.ts.


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.