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?

stackoverflow.com/questions/36201624/autoscroll-in-angular-2 — yurzui
– yurzui, Commented Feb 28, 2017 at 19:21
From the documentation: You can set query params and fragment as follows: <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> — JB Nizet
– JB Nizet, Commented Feb 28, 2017 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
– seanEd, Commented Feb 28, 2017 at 19:38

mickdev · Accepted Answer · 2017-02-28 19:32:13Z

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, 2017 at 19:32

answered Feb 28, 2017 at 19:21

mickdev

2,88514 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

seanEd Over a year ago

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

mickdev Over a year ago

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' });

seanEd Over a year ago

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 · Accepted Answer · 2017-03-01 10:31:35Z

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); } }); } }

Collectives™ on Stack Overflow

Angular 2 equivalent to a href="#someElementId"

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related