kumara
kumara

Reputation: 937

CSS-menu issue in angular project

I am trying to add a bootstrap menu to my angular 6 project. This is the code

  <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">User</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Customer</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">OL User</a>
    </div>
  </li>

</ul>

The issue is, when I click customer link, URL redirect to the localhost:4200/# and submenu is not opening. below code techniques, I used to project:

app.component.ts

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

app.routing.module.ts

@NgModule({
  imports: [RouterModule.forRoot(routes,{useHash: true})],
  exports: [RouterModule],

})

Upvotes: 1

Views: 90

Answers (1)

Jonas Praem
Jonas Praem

Reputation: 2444

Local redirects in Angular are usually done by using routerLink:

From the DOCS

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component
</a>

More information about Angular routing


You can use href if you want. But the biggest issue is that you haven't associated a component with a route.

Take a look at this example

Upvotes: 2

Related Questions