How to navigate into sections with angular router?

Question

How can I navigate to a specific section of an HTML on Angular 2? I want to navigate as follows:

<a href="#first">First section</a></li>
<a href="#second">Second section</a></li>
<a href="#third">Third section</a></li>

<section id="first">
  Content...
</section <section id="second">
Content...
</section>
<section id="third">
  Content...
</section>

but with Angular router.

Answer 1

You need to add this in your router

const routerOptions: ExtraOptions = {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64],
  };




@NgModule({
    imports: [CommonModule, RouterModule.forRoot(routes, routerOptions)], //ExtraOptions
    ...
  })

And Your anchor tag should be like this

<a 
  [routerLink]="['/yourPageLink', params]" fragment="first}">First section</a>

For Doc Click here