Anchor effect on a dynamically charged component at Angular

Question

Hello. I use version 8.1.3 of Angular in my project and am having some problems creating an anchor effect on the product card that is dynamically loaded onto the screen. I tried using old html with href pointing to the product ID, but to no avail. I also tried one or other library ready to make use of scrollTo() in other ways but also without success. Has anyone ever done anything like this or has any idea how to do it in a spa?

<app-card-produto *ngFor="let p of e.produtos"[produto]="p"">
</app-card-produto>

This is the card I have on my catalog screen. The behavior I need is to enter the detail screen of the product, but when returning, the page scrolls to the card that has the ID (or other identifier that is needed) which I finished last. The good part of this is that when I return from the detail screen, I already have the API query ready, IE, the cards just need to be rendered, I already have the entire list of products saved in Indexeddb.

I am totally running away about using jquery, I think there should be a solution to this without needing it, but in an extreme case I can surrender on this.

Answer 1

I managed to solve the problem, now only needing adjustments to leave 100%.

In the catalog screen ngOnInit, I added the following:

window.addEventListener("scroll", this.scroll, true);

This adds the signature to the scroll event by executing the scroll (this.scroll) function for each change in the scroll value.

The function was thus:

scroll = (event: any): void => {
    this.scrollNumber = event.srcElement.scrollTop;
    // console.log(event);
    // console.log("posição " + this.scrollNumber);
};

Since my behavior of accessing the product detail screen was triggered by the method inside the card, I passed the value of the saved scrollNumber in the function to the card per parameter.

<app-card-produto *ngFor="let p of e.produtos" [produto]="p"
    [scrollPosition]="scrollNumber">
</app-card-produto>

In the method that redirects to the detail screen passing all irrelevant parameters here, I save the scroll value in Sessionstorage as follows:

let scroll = this.scrollPosition;
sessionStorage.setItem("scrollPosition", JSON.stringify(scroll));

Once this is done, when I return to the catalog screen, I create a method to read this variable in the session and set its value to the page scroll. In ngOnInit I call the method this.recoverScroll();. And in the method I have the following:

recoverScroll() {
    let scrollSaved = JSON.parse(sessionStorage.getItem("scrollPosition"));
    setTimeout(() => {
        document.getElementsByClassName(
            "ng-scroll-viewport"
        )[0].scrollTop = scrollSaved;
    }, 10);

    //reset scroll
    sessionStorage.setItem("scrollPosition", JSON.stringify(0));
}

To ensure that access by no other route other than Detail -> Cataloguepage ends up rolling to a product that does not make sense in context, at the end of the zero I method the session variable.

Completion: Maybe it is not one of the best practices to set the value using 'ng-scroll-viewport', but I could not using any other way I found through the forums. Just need now to add an animation to make the scroll smooth. I’ve seen that in this case it won’t be possible through CSS, but as soon as I resolve update the answer.

I just started working with programming and even less with Angular, so surely there must be a more optimized way to do this, but I hope somehow I’ve helped!