Angular2 Routing with Hashtag to page anchor

Update

This is now supported

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

Add Below code to your component to scroll

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import  private fragment: string;  constructor(private route: ActivatedRoute) { }  ngOnInit() {    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });  }  ngAfterViewInit(): void {    try {      document.querySelector('#' + this.fragment).scrollIntoView();    } catch (e) { }  }

Original

This is a known issue and tracked at https://github.com/angular/angular/issues/6595

Sorry for answering it bit late; There is a pre-defined function in the Angular Routing Documentation which helps us in routing with a hashtag to page anchor i.e, anchorScrolling: 'enabled'

Step-1:- First Import the RouterModule in the app.module.ts file:-

imports:[     BrowserModule,     FormsModule,    RouterModule.forRoot(routes,{      anchorScrolling: 'enabled'    })  ],

Step-2:- Go to the HTML Page, Create the navigation and add two important attributes like [routerLink] and fragment for matching the respective Div ID's:-

<ul>    <li> <a [routerLink] = "['/']"  fragment="home"> Home </a></li>    <li> <a [routerLink] = "['/']"  fragment="about"> About Us </a></li>  <li> <a [routerLink] = "['/']"  fragment="contact"> Contact Us </a></li></ul>

Step-3:- Create a section/div by matching the ID name with the fragment:-

<section id="home" class="home-section">      <h2>  HOME SECTION </h2></section><section id="about" class="about-section">        <h2>  ABOUT US SECTION </h2></section><section id="contact" class="contact-section">        <h2>  CONTACT US SECTION </h2></section>

For your reference, I have added the example below by creating a small demo which helps to solve your problem.

Demo : https://routing-hashtag-page-anchors.stackblitz.io/

Although Günter's answer is correct, it doesn't cover the "jump to" the anchor tag part.

Therefore, additionally to:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

... in the component (parent) where you need a "jump to" behavior, add:

import { Router, NavigationEnd } from '@angular/router';class MyAppComponent {  constructor(router: Router) {    router.events.subscribe(s => {      if (s instanceof NavigationEnd) {        const tree = router.parseUrl(router.url);        if (tree.fragment) {          const element = document.querySelector("#" + tree.fragment);          if (element) { element.scrollIntoView(true); }        }      }    });  }}

Please note that this is a workaround! Follow this github issue for future updates. Credits to Victor Savkin for providing the solution!