0

What Im trying to do is have a link on my homepage link to a certain section on another page.. so what I've tried is to routerLink to the page and then a certain id but Its not working I'm not sure even if this is how you would do this...

homepage.component.html

<img [routerLink]="['our-products/#element']" data-src="../../assets/img/product-logos/product-logo.svg" alt="Product Logo">

then obviously on my product page

  <div class="product" id="element">Content in here</div>

any help would be appreciated

Edit I have since added fragment to the string like so 

<img [routerLink]="['our-technology']" fragment="element" data-src="../../assets/img/product-logos/product-logo.svg" alt="Product Logo">

which does then make the url http://mywebsite.com#element ..but it doesn't actually take me to that part of the page..

Thanks!

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152

1 Answers1

1

you can use the property 'fragment' like that :

 <img [routerLink]="['our-products']" fragment="element" data-src="../../assets/img/product-logos/product-logo.svg" alt="Product Logo">

more info here

Constantin Guidon
  • 1,892
  • 16
  • 21
  • This doesnt exactly work as expected.. yes the url changes to http://mywebsite.com#element and goes to the product page but... it doesnt go to the section on the page.. any ideas? – Smokey Dawson Feb 04 '18 at 23:14
  • 1
    referring to this response you have to do the scroll action manually : https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor – Constantin Guidon Feb 04 '18 at 23:16