0

I'm building an Angular 4 app and I want to use anchor-ing in it. It's a one-page website, on which I have 4 containers, listed vertically. Just like so:

---------------
|             |
|             |
|             |
---------------
---------------
|             |
|             |
|             |
--------------- etc...

Say two of the boxes are 'about us' and 'location'. At the top of the app there is a navbar and I want on click at a <li>, Angular to scroll down with an transition and stop at the proper component (1 of these 4 containers). I'm new to Angular 4, I'm still studying it and I'm asking for an advice. Can I achieve this anchor effect with ng's Router, given that I'll need to attach a scroll-down animation to it, or I should stick to ? Which way is better to go with? And also, if I should do it with router are there any specific things which I have to know about this kind of redirection or it's going again like {path: 'about', AboutComponent }; ? For the transition I am planning to do, shall I read about @angular/animations or it is going to be plain TypeScript?

KDX2
  • 945
  • 2
  • 14
  • 31
  • 1
    Check out the docs here: https://angular.io/guide/router#query-parameters-and-fragments But you may want to consider showing several sets of content by creating a component for each one. So the above design would be four components and you'd route to each one. – DeborahK Sep 11 '17 at 22:11
  • Thank you @DeborahK. I'll read it. – KDX2 Sep 12 '17 at 06:38
  • Check this question: https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor – ferralucho Jan 04 '18 at 17:25
  • 1
    Possible duplicate of [Angular2 Routing with Hashtag to page anchor](https://stackoverflow.com/questions/36101756/angular2-routing-with-hashtag-to-page-anchor) – ferralucho Jan 04 '18 at 17:27

0 Answers0