Angular router link to element with a specified id within the page

Question

I'm using Angular Router and I'm trying to link to a sub-component in another route by id. Basically what would usually be done using the <a href="www.url.com/profile/#profile-header-id">.

I'm not sure if there's a built-in way for the Angular router to do this, but if not perhaps I can manually trigger the link at a later point when I know the element has been rendered.

The issue isn't linking to another route which of course is done with the Link from the Angular router. The issue is linking to an element which is found in the rendered HTML of the linked component.

Less Abstract Code Example:

So let's say my router in the app.module.ts file is

`const routes = [
  { path: '', component: HomeComponent},  
  { path: '#section3', component: HomeSection3Component}, 
  { path: 'B', component: BComponent}, 
];`

Now in component OtherComponent, I want a Link that not only takes me to the home page route ' ', but also scrolls to the element of id #section3, thereby skipping all the irrelevant stuff.

My home component has nested components for each one of the sections of the page. Each section/component has an id.

home.component.html

`<main>
     <app-section1></app-section1>
     <app-section2></app-section2>
     <app-section3></app-section3>
</main>`

However, all I can see is a blank page when clicking the button <button routerLink="#section3">Go to homepage section 3</button> on the B page.

Use fragment in routing and use plain old javascript way to scrollIntoView. Her is an example in more details stackoverflow.com/questions/36101756/… — Fiyaz Hasan
– Fiyaz Hasan, Commented Feb 7, 2018 at 6:53
Thanks it didn't work, but it was as easy as creating links in the following fashion: <div [routerLink]="['']" fragment="section3"> <a href="#section3">Jump to 'Section3' anchor </a> </div> — Mau Gonzalez
– Mau Gonzalez, Commented Feb 8, 2018 at 5:40

Mau Gonzalez · Accepted Answer · 2018-02-08 05:46:41Z

6

The most elegant solution is just to add a fragment property to add the #section3 to the URL and then make it jump to this section with an anchor tag.

<div [routerLink]="['']" fragment="section3"> <a href="#section3">Jump to 'Section3' anchor </a> </div>

answered Feb 8, 2018 at 5:46

Mau Gonzalez

1372 gold badges4 silver badges11 bronze badges

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

Comments

Lars Gyrup Brink Nielsen · Accepted Answer · 2018-10-03 19:53:00Z

5

Use the routerLink directive combined with its fragment input property.

<a routerLink fragment="section3">Section 3</a>

With your routes, the rendered DOM is

<a href="/#section3">Section 3</a>

Make sure that you have imported RouterModule in the declaring module of the component in which you use the routerLink directive. Example:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    HomeComponent,
    HomeSection1Component
    HomeSection2Component,
    HomeSection3Component,
  ],
  imports: [
    CommonModule,
    RouterModule,
  ],
})
export class HomeModule {}

answered Oct 3, 2018 at 19:53

Lars Gyrup Brink Nielsen

4,1352 gold badges37 silver badges35 bronze badges

1 Comment

Richard Muvirimi Over a year ago

You might also need to add anchorScrolling: "enabled", to your RouterModule.forRoot config options in your routing module to have it scroll to the element.

Collectives™ on Stack Overflow

Angular router link to element with a specified id within the page

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related