Angular 2 routing to specific part of a webpage from one component link to another component

Question

I have a link in footer that takes to the terms page but I want that link to take to a specific part of the terms webpage (3rd paragraph in terms).

Here is the code for footer.component.html

<a routerLink="terms">Terms & conditions</a> | 
<a routerLink="terms">Privacy policy</a> | 
<a routerLink="terms">Cancellation policy</a>

In terms.component.html is the place where i want the privacy policy link in the footer to be opened when clicked.

<ol start="3">
    <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
</ol>

What do we need to use for these to work? Any help is appreciated. Thanks.

https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor — Stefan LoKran Dotti, Dec 05 '17 at 06:00
@StefanLoKranDotti the link u provided is for single component but i have two components to route to — Johny_Bravo, Dec 05 '17 at 06:59
It has nothing to with the component. The router is doing the routing to the component and settings the anchor. It should work like described below. — Stefan LoKran Dotti, Dec 05 '17 at 07:07
i have added the methods in the component then it worked perfectly — Johny_Bravo, Dec 05 '17 at 07:13

score 7 · Answer 1 · edited Dec 05 '17 at 06:22

7

Here is the answer ,

and <a routerLink="terms">Terms & conditions</a> | <a routerLink="terms">Privacy policy</a> | <a routerLink="terms">Cancellation policy</a>

Instead of just using . <a routerLink="terms">Terms & conditions</a>

use like this

 <a [routerLink]="['/terms']" fragment="terms"> Terms & conditions </a>
 <a [routerLink]="['/terms']" fragment="cancel"> Cancellation policy </a>
 <a [routerLink]="['/terms']" fragment="privacy"> Privacy policy </a>

page should be like

<ol start="3" id="privacy" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
</ol>

 <ol start="3" id="terms" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
 </ol>

 <ol start="3" id="cancel" >
     <li>INFORMATION SUBMITTED THROUGH OR TO OUR SERVICES</li>
 </ol>

Refer to the API for detailed descriptions and usage. - https://angular.io/api/router/RouterLink

edited Dec 05 '17 at 06:22

Praveen Puglia

5,577
5
34
68

answered Dec 05 '17 at 06:16

Rahul VV

265
1
8

@Johny_Bravo please refer this answer – Rahul VV Dec 05 '17 at 06:20
do i need to import any modules? – Johny_Bravo Dec 05 '17 at 06:45
1

@Johny_Bravo please use more content for each references (terms & cancel & Privacy ) then only the browser will starts with that part – Rahul VV Dec 05 '17 at 06:46
yes i have a lot of content but wen i clicked on the specific link it is not going to the specific part of the page – Johny_Bravo Dec 05 '17 at 06:49
yes its appearing but its not moving to specific part – Johny_Bravo Dec 05 '17 at 06:52
@Johny_Bravo Only RouterModule is needed – Rahul VV Dec 05 '17 at 07:03
i figured it out by adding router events in the component I am able to move to the specific part of the page – Johny_Bravo Dec 05 '17 at 07:15
am too having this problem what you have implemented to work this – Prasanth S Dec 05 '17 at 07:33
This worked! Just added ```fragment="idOfTheSectionIWantToJumpTo"``` and all good. Very straightforward! – MikhailRatner Feb 17 '22 at 15:38

score 5 · Accepted Answer · answered Dec 05 '17 at 07:19

To add to @Rahul VV's answer i have edited component with event scrollIntoView below like this

footer.component.ts

import { Router, NavigationEnd } from '@angular/router';

constructor(router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(); }
        }
      }
    });
   }

Angular 2 routing to specific part of a webpage from one component link to another component

2 Answers2