Angular ngx infinite scroll을 이용한 무한 스크롤 구현

설치하기

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!!')
}
}

nodejs thumbnail 만들기 Angular 에러 처리

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×