CODEWITHSUNDEEP
angularangular2-routing
Avi
Avi

Reputation: 1964

angular 2 scrollto behaviour

I followed the angular 2 tutorials: Routing and navigation - query parameters https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

the idea is to drill down from a list to a new route and then return back to the same item on the list.

It works fine for them because the list is very short without scroll.

I have the same scenario but with a long list. after going back to the list screen I load and bind the list and I need to set the scroll to current item (which is not always visible). I tried:

 ngAfterViewChecked() {
        if(this.selectedId)
            this.el.nativeElement.querySelector("[id='7']").scrollIntoView();
    }

(7 is hard coded for simplicity) actually a tried it on every hook and every time the query selector returns null. (on the browser console after page load this line works fine: ...querySelector("[id='7']").scrollIntoView();)

I'm out of ideas, can you think of something else to accomplish scrolling after binding the list?

here is angular live exmple: http://plnkr.co/edit/?p=preview if you shrink the window(to get scroll bar) and click on the last hero (rubberMan) you'll see what I mean. Thanks

Upvotes: 0

Views: 479

Answers (1)

Avi
Avi

Reputation: 1964

I found a solution/workaround:

ngAfterViewChecked() {
    let timer = Observable.timer(0);
    timer.subscribe(t => {
        if (this.selectedId)
            this.el.nativeElement.querySelector("[id='" + this.selectedId + "']").scrollIntoView();
    });

it seams that a timer with zero delay fix the problem

Upvotes: 2

Related Questions