Anchor fragments in Angular 6

Question

I am trying to do something as simple as making anchor links that jump to a link on the same page. There is surprisingly only very limited documentation but I found following:

Using anchor link #id in Angular 6

@machado comment recommends following which seems like the correct approach:

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};


// Then just import your RouterModule with these options

RouterModule.forRoot(MY_APP_ROUTES, routerOptions)

However I haven't found any documentation on how to make the links. Following dosen't work:

My link:

<a href="#{{group.name}}">{{group.name}}</a>

My anchor:

<h2 id="{{group.name}}">{{group.name}}</h2>

https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor — danday74, Oct 15 '18 at 19:43

pablorsk · Accepted Answer · 2020-09-18T11:39:00.700

4

If you need to do this on HTML template, just need to do

<h1 [attr.id]='link'>{{link}}</h1>

<a [routerLink]='"."' [fragment]="link">{{link}}</a>

Don't forget add options to your App Router

RouterModule.forRoot(routes, {
  scrollPositionRestoration: 'enabled',
  anchorScrolling: 'enabled',
  scrollOffset: [0, 25], // cool option, or ideal option when you have a fixed header on top.
});

Check this example about anchors links with fragment.

edited Sep 18 '20 at 11:39

answered Sep 17 '20 at 13:31

pablorsk

3,861
1
32
37

Also `[routerLink]='"."'` can be simply `routerLink="."` – Vale H Mar 22 '21 at 16:27

score 2 · Answer 2 · answered Feb 12 '20 at 03:34

trust me you'll wanna go with something more simple and it works with like a few lines using angular common library:

component.ts

import { ViewportScroller } from '@angular/common';

  public scrollAuto(elementId: string): void { 
    this.viewportScroller.scrollToAnchor(elementId);
  }

component.html

 <button(click)="scrollAuto('{{group.name}}')">{{group.name}}</button>

otherwise if you really want to have fragment enabled routes then you can follow use these stackblitz as a guide: https://stackblitz.com/edit/fragment-url-in-angular?file=src%2Fapp%2Fapp.component.html

https://stackblitz.com/edit/angular-router-scroller?file=src%2Fapp%2Fapp.component.ts

That's not actually a great solution because it prevents the achor-specific URL being shared. The target information never gets put into the address bar and so it's confined to only being an onsite tool — Peter Nixey, Apr 20 '20 at 10:21

Marshal · Answer 3 · 2018-10-15T18:32:36.660

1

You probably just need to modify your anchor to this removing the #.

<h2 id="{{group.name}}">{{group.name}}</h2>

Just pass the element ID as a fragment parameter in the url to use anchorScrolling.

If you look at the format of this url everything after # is the fragment

https://angular.io/guide/router#query-parameters-and-fragments

For example

<h2 id="h2">{{group.name}}</h2>

http://websiteBaseUrl/#h2

Update: In the linked example its done programatically

// Set our navigation extras object
    // that contains our global query params and fragment
    let navigationExtras: NavigationExtras = {
      queryParams: { 'session_id': sessionId },
      fragment: 'anchor'
    };

    // Navigate to the login page with extras
    this.router.navigate(['/login'], navigationExtras);
    return false;
  }

Update 2: This works from href tested in stackblitz.

<a href="#h2">test</a>
<h2 id="h2">{{group.name}}</h2>

edited Oct 15 '18 at 18:32

answered Oct 15 '18 at 18:06

Marshal

10,499
2
34
53

Thanks. How do you build the url using angular syntax in the html? – Thomas Segato Oct 15 '18 at 18:11
Please see revised answer on how to do it programatically from the component. – Marshal Oct 15 '18 at 18:13
I am new to Angular, sorry. Update part is that placed in the router module and what is session id variable? And not sure what the navigate(['/login'] is for? – Thomas Segato Oct 15 '18 at 18:26
Please see revised answer for an href approach, I believe you just need to remove the # from your anchor id="#{{group.name}}" to get your syntax to work. – Marshal Oct 15 '18 at 18:27
Damn that was an dummie :D I have changed as shown i original post now. However this is the url of my page. http://localhost:4200/report/23 when hovering over the link it shows http://localhost:4200/#accomendation which is properly the problem. Is there anyway to make it build the full url? – Thomas Segato Oct 15 '18 at 18:41
If you need the url to be localhost:4200/report/23#accomendation then make your href="report/23#accomendation" – Marshal Oct 15 '18 at 18:48
href="report/23#{{group.name}}" – Marshal Oct 15 '18 at 18:52
Worked. As you say I have to build the complete url like href="report/{{id}}#{{group.name}}". Thanks alot. – Thomas Segato Oct 15 '18 at 18:57

Anchor fragments in Angular 6

3 Answers3

Linked