설치하기
1
| npm install ngx-infinite-scroll --save
|
동작 특성
window scroll 이벤트를 감지하여 callback을 발생시킨다.
실제 요소가 스크롤 될때 콜백을 수행하기 위해서는 다음 설정이 되어야 한다.
1 2
| [scrollWindow]="false" set an explict css "height" value to the element
|
import 하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { InfiniteScrollModule } from 'ngx-infinite-scroll'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app';
@NgModule({ imports:[ BrowserModule, InfiniteScrollModule ], declarations: [ AppComponent, ], bootstrap: [ AppComponent ] }) export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
|
아래 예제에서는 스크롤이 내려가면 onScroll 함수가 호출된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| import { Component } from '@angular/core';
@Component({ selector: 'app', template: ` <div class="search-results" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()"> </div> ` }) export class AppComponent { onScroll () { console.log('scrolled!!') } }
|
Comments