component.ts
import { HostListener } from '@angular/core'; @HostListener('window:scroll', ['$event']) _functionname(event){ //함수 내용 }
html
<div (scroll)="_functionnamel($event)"></div>
앞서 만들어 둔 함수 안에, 스크롤의 위치를 인식하는 기능들로 조건문을 만든다.
component.ts
_functionname(event){ if( 10 +document.documentElement.scrollTop +document.documentElement.clientHeight >= document.documentElement.scrollHeight ){ //함수 내용 } }
scrollTop은 scrollbar의 상단 위치
clientHeight는 scrollbar의 길이
scrollHeight는 전체 scroll 길이를 나타낸다.
즉 (스크롤바 상단위치)+(스크롤바 길이) = (스크롤바 하단위치)로
이것이 전체 scroll길이와 같아지면 스크롤을 가장 아래로 내린 것이다.
10은 여유 공간을 두기 위한 상수이다.
component.ts
this.apiService._apiFunctionName().subscribe( data =>{ _arrayname1 = _arrayname1.concat(_arrayname2); }, error => {console.log(error)} );
처럼 concat을 사용한다.
이때 concat을 사용할 _arrayname1은 반드시 초기화되어있어야 한다.
ex)
name : string[]; //(x)
name : string[] = []; //(o)