Angular 6 | RouterLink

Question

is there any way to go to another page's section which is defined by id without reload

Answer 1

There were a bunch of new scrolling features added in Angular v6.1.

Here is a quote from a blog post about it:

The Router Scroller provides functions related to scrolling to the Angular Router. With Router Scroller, you can do the following things.

Restore to scroll position before transition when browser back Fragmented URL like #foo and automatically scroll to elements with corresponding ID

I assume the second paragraph (anchor scrolling) is what you are asking about?

If so, you can find out more here:

https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

And

https://blog.ninja-squad.com/2018/07/26/what-is-new-angular-6.1/

Answer 2

You can do using scrollIntoView method

Credits goes to:ibenjelloun

Example:https://stackblitz.com/edit/angular-scroll-spy-routing

@HostListener('scroll', ['$event'])
onScroll(event: any) {
    let currentSection: string;
    const children = this._el.nativeElement.children;
    const scrollTop = event.target.scrollTop;
    const parentOffset = event.target.offsetTop;
    for (let i = 0; i < children.length; i++) {
        const element = children[i];
        if (this.spiedTags.some(spiedTag => spiedTag === element.tagName)) {
            if ((element.offsetTop - parentOffset) <= scrollTop) {
                currentSection = element.id;
            }
        }
    }
    if (currentSection !== this.currentSection) {
        this.currentSection = currentSection;
        this.sectionChange.emit(this.currentSection);
    }
}