How use routing in angular correctly?

Question

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?

you have used routerActive in wrong place also you should be using ngClass here since the active class is to be added to a different element than routerLink — Joel Joseph
– Joel Joseph, Commented Jun 20, 2019 at 6:45

user4676340 · Accepted Answer · 2019-06-20 06:39:22Z

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) {}

Adrita Sharma · Accepted Answer · 2019-06-20 06:29:38Z

0

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>

answered Jun 20, 2019 at 6:29

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

shehan96 Over a year ago

I try this but I want to add active css class to be is li element because when ever user click the link I want to highlight the main element it means li element. how to do that???

Benji49 · Accepted Answer · 2019-06-20 07:32:33Z

0

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

answered Jun 20, 2019 at 7:32

Benji49

4411 bronze badges

Collectives™ on Stack Overflow

How use routing in angular correctly?

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related