CODEWITHSUNDEEP
angular
Thomas Segato
Thomas Segato

Reputation: 5223

Anchor fragments in Angular 6

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>

Upvotes: 4

Views: 16739

Answers (3)

pablorsk
pablorsk

Reputation: 4276

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.

Upvotes: 4

Michael P.
Michael P.

Reputation: 77

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

Upvotes: 2

Marshal
Marshal

Reputation: 11081

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>

Upvotes: 1

Related Questions