CODEWITHSUNDEEP
angulartypescript
kathir
kathir

Reputation: 4285

angular 2 scroll down call function load more

angular 2 the div height is 1000px i will scroll to reach the 800px call the function loadmore.

<div class="row" style="margin:0px 0px;height:1000px; overflow-Y:auto;">
   <div class="col-sm-3" *ngFor="let user of users ;let i = index ">
      <div class="user_main">
         <img *ngIf="user.image == ''"  src="http://localhost/AdminApp/assets/images/{{user.image}}"  class="user_img">
         <div style="margin:0px 5px;">
            <p class="user_name">{{user.first_name }} {{user.last_name}}</p>
            <p class="user_email"> {{user.email}} ,</p>
            <span class="user_job"> {{user.job}} </span>
         </div>
      </div>
   </div>
   <button (click)="LoadMore()"> Load More </button>
</div>

Upvotes: 0

Views: 6431

Answers (2)

kathir
kathir

Reputation: 4285

 @HostListener("window:scroll", ["$event"])
   onWindowScroll() {
   let pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
   let max = document.documentElement.scrollHeight;
   if(pos == max )   {
       // action here
          }
   }

Upvotes: 1

Martin Ad&#225;mek
Martin Ad&#225;mek

Reputation: 18389

You can create a directive for this and use @HostListener to listen on scroll event:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[infiniteScroll]',
})
export class InfiniteScrollDirective {

  @Input() scrollThreshold = 200; // px

  constructor(private element: ElementRef) {}

  @Input('infiniteScroll') loadMore;

  @HostListener('scroll')
  public onScroll() {
    const scrolled = this.element.nativeElement.scrollTop;
    const height = this.element.nativeElement.offsetHeight;

    // if we have reached the threshold and we scroll down
    if (height - scrolled < this.scrollThreshold) {
      this.loadMore();
    }

  }

}

Not tested, but it should put you on the right direction. To use it, do it like this:

<div class="row"
     style="margin:0px 0px;height:1000px; overflow-Y:auto;"
     [infiniteScroll]="LoadMore">

You will probably need to define LoadMore as arrow function so the context (this keyword) will be preserved.

// in component controller
LoadMore = () => { // load more items };

Upvotes: 2

Related Questions