CODEWITHSUNDEEP
angularroutes
shehan96
shehan96

Reputation: 388

How use routing in angular correctly?

I have already add routing to my angular project. And it is working fine. But I have a issue with router active status.

I use router link to link the router and add router active to find the activated router.

I use bootstrap default nav bar in my project.And I add drop down to nav bar as follow.

<li class="nav-item dropdown" routerActive="active">
        <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" routerLink="/link-one">Link One</a>
          <a class="dropdown-item" routerLink="/link-two">Link Two</a>
          <a class="dropdown-item" routerLink="/link-three">Link Three</a>
        </div>
      </li>

But When user click router links router active is not working. This issue is only for dropdown but in single nav bar item works perfectly.

What is the issue with this?

Upvotes: 0

Views: 368

Answers (3)

Benji49
Benji49

Reputation: 44

You must use ng-dropdown with angular :

<div ngbDropdown class="dropdown">
  <button class="btn btn-outline-primary" id="dropdownMenuLink" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownMenuLink">
    <button ngbDropdownItem ><a routerLink="link-one">Link One</a></button>
    <button ngbDropdownItem ><a routerLink="link-two">Link Two</a></button>
    <button ngbDropdownItem ><a routerLink="link-three">Link Three</a></button>
  </div>

I had the same problem recently

Upvotes: 0

user4676340
user4676340

Reputation:

If you want to add the active class to your li, you will have to use template references, or the router in your TS.

<li class="nav-item dropdown" [class.active]="link0rla.isActive || link1rla.isActive || link2rla.isActive">
  <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" routerLinkActive #link0rla="routerLinkActive" routerLink="/link-one">Link One</a>
    <a class="dropdown-item" routerLinkActive #link1rla="routerLinkActive" routerLink="/link-two">Link Two</a>
    <a class="dropdown-item" routerLinkActive #link2rla="routerLinkActive" routerLink="/link-three">Link Three</a>
  </div>
</li>

If you want to do it through the router : 

get isLiActive() {
  return ['/link-one', '/link-two', '/link-three']
    .some(link => this.router.url.startWith(link));
}

constructor(private router: Router) {}

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22213

You need to place routerActive in the same anchor tag <a></a> where routerLink is added.

It won't work if you place it in <li>

Try like this:

<a class="dropdown-item" routerLink="/link-one" routerActive="active" >Link One</a>

Upvotes: 0

Related Questions