Angular 4 - how to trigger an animation when a div comes into the viewport?

Question

I\'ve been building a new site using Angular 4 and i\'m trying to re-create a effect where when a div becomes visible (when you scroll down the screen) then that can then tr

Answer 1

Here is a simple example of an infinity scroll; it triggers handleScrollEvent() when the element comes inside the viewport.

inside item-grid.component.html

Load more

inside item-grid.component.ts:

@ViewChild('loadmoreBtn') loadmoreBtn: ElementRef;
curpage: number;
maxpage: number;

ngOnInit() {
  this.curpage = 1;
  this.maxpage = 5;
}

handleScrollEvent() {
  const { x, y } = this.loadmoreBtn.nativeElement.getBoundingClientRect();
  if (y < window.innerHeight && this.maxpage > this.curpage) {
    this.curpage++;
  }
}