Scroll to Top of Document After Param Change in Angular 4?

Question

I have already coded my app.component.ts file to scroll to the top of my app after every page state change using renderer.setElementProperty.

I also have a example.com/product/xx page where the 'xx' represents a different param. I have coded a route.param.subscribe to listen for param changes and fetch the content of the page based on the new parameter.

My issue is primarily on mobile phones (browser view) or pages with longer content.

My code listens for param changes, updates the content but does not scroll to the top of the page, although my app.component.ts file accomplishes this with my standard route changes.

I have tried window.scrollTo(0, 0) and a couple of other JavaScript based window actions to no avail.

Has anyone successfully coded a scroll back to top functionality inside of a routes param subscription?

coded as seen below

this.route.params
    .subscribe(item => {
        this.item = item; // successfully retrieves param content
        window.scrollTo(0, 0); // does not scroll to top
        this.renderer.setElementProperty(document.body, "scrollTop", 0);
        // also does not work
    });
});

Any ideas to property inject a "scroll to top" functionality after successfully listening to params from route in an Angular 4 (4.4.x) app?

score 0 · Answer 1 · answered Oct 20 '17 at 04:33

0

Try like this :

component.ts

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

export class Component {
    constructor( @Inject(DOCUMENT) private document: Document) { }

    this.route.params.subscribe(item => {
        this.item = item; // successfully retrieves param content   
        this.document.body.scrollTop = 0;
    })
}

answered Oct 20 '17 at 04:33

Chandru

10,864
6
38
53

Thank you for this suggestion, as I hadn't tried to import DOCUMENT. Unfortunately, this also does not appear to be working. I then read that the routing module needs to be imported LAST in the imports array in the app.module.ts file and moved it last. It still did not working. Will keep trying. – Mindsect Team Oct 20 '17 at 12:17

score 0 · Accepted Answer · answered Oct 21 '17 at 04:46

Found the answer from an excellent response to the post How to reload the current route with the angular 2 router by @Arg0n.

My entire purpose is to scroll to the top of a product page after each param change. As it stands now, a param change does not refresh the state of the URL because the route has not changed itself. I have added the code from Arg0's response to the code above (for the routes.param listen):

// reset item object based on params id change
this.route.params
    .subscribe(params => {
        this.id = params['id'];
        this.router.routeReuseStrategy.shouldReuseRoute = function() {
            return false;
        }

        // get item object
        this.productService.getItem(this.id)
            .subscribe(item => {
                this.item = item;
            });

        });
    }

Now when an new item is loaded (params change), the page mimicks a non-SPA application and scrolls to the top of the page (without the flicker of a non-SPA application).

Scroll to Top of Document After Param Change in Angular 4?

2 Answers2