Angular 2 - issue with bootstrap nav <li><a href=“#header”></a></li> in routing set up

Question

am trying to converting normal bootstrap page into components in Angular 2. am actually facing issues when constructing navigation. initially the tags <li><a href></a></li> is like below

 <div id="header" class="shadow">
        <!-- Navigation -->
    <nav>
            <div class="nav nav-wrapper navbar-fixed-top">
                <div class="container-fluid">

                    <!-- Menu Option -->
                    <ul class="nav-justified hide-on-med-and-down">
                        <li><a href="#header">About</a></li>                  
                        <li><a href="#prodcutInfo">Prod.Info</a></li>

                    <div id="side-nav">
                        <div id="nav-header">
                            <div id="nav-profile" class="center-block">

                                <!-- Profile Picture [Square] -->
                                <img src="images/profile-pic.png">
                            </div>
                            <h6 class="text-center text-capitalize">John Robert Smith</h6>
                        </div>

                        <div id="nav-link-wrapper">

                            <!-- Side Menu Option -->
                            <ul>
                                <li><a class="nav-link" href="#header">About</a></li>
                                <li><a class="nav-link" href="#prodcutInfo">Prod.Info<</a></li>                           
                            </ul>
                        </div>

                    </div>
                    <!-- ./Side Nav -->
                    <!-- Side Nav Mask -->
                    <div id="side-nav-mask"></div>

                </div>
            </div>
        </nav>
    </div>

could someone tell how to convert that normal a href tag into angular route.

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './about/about.component'; 
import { ProdComponent } from './prod/prod.component'; 

const appRoutes: Routes = [

  { path: '', redirectTo: 'about', pathMatch: 'full' },
  { path: 'about', component: AboutComponent , data: { state: 'about'} },
  { path: 'prod', component: ProdComponent , data: { state: 'prod'} },
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

issue:

when i change like below

<li><a class="nav-link" [routerLink]="['/']">About</a></li>
<li><a class="nav-link" [routerLink]="['/prodcutInfo']">Prod.Info<</a></li> 

it gives me like below

Uncaught Error: Syntax error, unrecognized expression: /about
    at Function.ga.error (jquery-2.1.4.min.js:2)
    at ga.tokenize (jquery-2.1.4.min.js:2)
    at ga.select (jquery-2.1.4.min.js:2)
    at Function.ga [as find] (jquery-2.1.4.min.js:2)
    at n.fn.init.find (jquery-2.1.4.min.js:2)
    at new n.fn.init (jquery-2.1.4.min.js:2)
    at n (jquery-2.1.4.min.js:2)

Uncaught Error: Syntax error, unrecognized expression: /prod

could someone tell me why its happening? where am doing wrong.?

more info:

the #header actually mentioned in main div, that used to apply some scroll animation. whenever i tried to navigate from one link to another (ex. HOME|ABOUT|PROD.INFO) it will give smooth scrolling effect.

I've came across ng2-scroll-to and ngx-page-scroll, but could not make use of it effectively. I need your advice please. pls share some sample live example related to my issue.

Thanks in advance

Answer 1

you can use fragment

<li><a class="nav-link" [routerLink]="['/']" fragment="about" (click)="goToAbout()>About</a></li>

constructor( private route: ActivatedRoute, private router: Router ) {}

goToAbout() {
 this.route.fragment.subscribe((fragment) => {
   const elm = document.querySelector ( "#" + fragment)
   document.querySelector( "#" + fragment).scrollIntoView(elm)
 });
}