Angular 2 equivalent to a href="#someElementId"

Question

I am using:

gotoAbout() {
   this.router.navigate(['/'], { fragment: 'about' })
}

because routerLink and a href="#about" reloaded my page if I was not on my root / page. Using this function on the nav button it will navigate to /#about in one click without reloading the page but the problem is it is not jumping to that div at all like a href="#about" does when I am scrolled away from it on the page. Is there a way to achieve this in angular?

http://stackoverflow.com/questions/36201624/autoscroll-in-angular-2 — yurzui, Feb 28 '17 at 19:21
From [the documentation](https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html): You can set query params and fragment as follows: — JB Nizet, Feb 28 '17 at 19:24
I am trying to get to url.com/#about and jump to div id="about" from url.com/somethingelse/somethingelse. So I need a non-reloading router back to /#about and then the div jump. What does debug:true; do? Does it set ?debug=true in params or make it do a fragment jump after routing? — seanEd, Feb 28 '17 at 19:38

mickdev · Answer 1 · 2017-02-28T19:32:13.740

0

This seems a little hacky but it works:

In your component

goToDiv(fragment: string): void {
    window.location.hash = fragment;
}

In the template :

<a (click)="goToDiv('destination')">Go to div</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Edit: As @JB Nizet stated in is comment you can also try :

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html

edited Feb 28 '17 at 19:32

answered Feb 28 '17 at 19:21

mickdev

2,765
11
15

Hacky is fine, but will this goToDiv work before my (click) router which takes me to /#about which causes my body page to display the about div, so the div is not rendered on the dom until the routing is finished – seanEd Feb 28 '17 at 19:40
you can capture the fragment and run goToDiv() at Init. Edit: According to the doc, you can do better with something like this: `this.router.navigate(['/results'], { fragment: 'top' });` – mickdev Feb 28 '17 at 19:46
I use this one component that reads the fragment from ActivatedRoute to determine what to display from amongst a couple options, this would work if I didnt do it that way :P Ill try your gotodiv solution now – seanEd Mar 01 '17 at 05:30

score 0 · Accepted Answer · answered Mar 01 '17 at 10:31

For anyone interested, my solution goes as follows:

my navbar has a button 'about' which (click)="gotoAbout();" :

  gotoAbout() {
    let tree = this.router.parseUrl(this.router.url);
    if (tree.fragment == 'about') {
      let element = document.querySelector("#" + tree.fragment);
      if (element) {
        element.scrollIntoView(element);
      }
    }
    else {
      this.router.navigate(['/'], {fragment: 'about'})
        .then( () => {
          let tree = this.router.parseUrl(this.router.url);
          let element = document.querySelector("#" + tree.fragment);
          if (element) {
            element.scrollIntoView(element);
          }
        });
    }
  }

Angular 2 equivalent to a href="#someElementId"

2 Answers2