CODEWITHSUNDEEP
javascriptangular
Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

Angular 2: scroll event not firing

I am new to Angular 2. Trying to make rest call using scroll event. I have 200 records where initially I will make a rest call like this

localhost:8080/myapp/records=items&offset=0&limit=50

It will fetch 50 records first. But, when I scroll down it has to make another API call for fetching another 50 records like

localhost:8080/myapp/records=items&offset=50&limit=50

I tried this, but not firing the event.

HTML

    <div>
    <table class="doc-table" (scrolled)="onScroll($event.value)">
        <thead>
            <th class="avatar-th"></th>
            <th>Id</th>
            <th>Name</th>
            <th>Price</th>
        </thead>
        <tbody>
            <tr *ngFor="let item of items" (click)="routeTo(item.id)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </tbody>
    </table>
   </div>

Script

 @Component({
  selector: 'item-cmp',
  templateUrl: 'items.component.html'
})
export class PatientsComponent(){
  onScroll(event:any){
    alert("Scolled...");
  }
}

Bases on offset I have to make API call. Help me, how to do this?

Upvotes: 6

Views: 24918

Answers (4)

MrCroft
MrCroft

Reputation: 3089

I just came across this, looking for a way to tell Angular that I want the scroll (wheel) event to be passive (not possible yet - #8866). But the key word here for your question is wheel.

This is a pretty old question, probably you've already solved it, but there is no answer posted so those who come across this, having the same problem, will not get their answer.

Here it is:

There is no scrolled event.

As for the scroll event: it can't simply be delegated to just any element. You can attach it to window or document, but not to your div.

What you're looking for is the wheel event:

<div (wheel)="onMouseWheel($event)"></div>

Then you can simply check what the event provides in your component:

onMouseWheel(evt) {
    console.log('Wheel event: ', evt);
}

So you know what to use... For example the "distance" scrolled and the direction can be known from evt.deltaX, evt.deltaY. If deltaX is positive, then you've scrolled horizontally (on the X axis) to the right. If it's negative, then you've scrolled to the left. You get the point.

P.S. And don't worry, even though it's called wheel, it also fires when using the touchpad. I probably should have named my method simply onWheel.

P.P.S. I see another answer, suggesting mousewheel. mousewheel was never standard and is deprecated - MDN link

I suggest using wheel.

Upvotes: 19

Anas Al Hamdan
Anas Al Hamdan

Reputation: 768

I had the same issue before and the solution was to create a directive with a host listener decorator.

@HostListener('scroll', ['$event']) public scrolled($event: Event) {
    this.elementScrollEvent($event);
}

and for window events

@HostListener('window:scroll', ['$event']) public 
    windowScrolled($event: Event) {
    this.windowScrollEvent($event);
}

in any case, i have also published an NPM module to detect scroll events and to find out if the user is approaching the bottom of the element to load the next page or not.

check https://www.npmjs.com/package/ngx-scroll-event

Upvotes: 2

Aravind
Aravind

Reputation: 41581

mousewheel event will handle the scrolling.

HTML

<div style="height:1000px" (mousewheel)="mousewheel($event)">

</div>

Typescript

mousewheel(event){
    console.log(event)
  }

You can create a custom directive and handle it as well,

 @HostListener('mousewheel', ['$event']) onMousewheel(event) {
           do something
 }

LIVE DEMO

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658077

There is no scrolled event.

I assume it should be 

<table class="doc-table" (scroll)="onScroll($event)">

except when scrolled is some custom event of yours.

Upvotes: 0

Related Questions