CODEWITHSUNDEEP
angularangular5
POV
POV

Reputation: 12005

How to set active route link in Angular?

I have the following link:

 <a routerLink="{{item._url}}" (click)="setActiveLink(i, item._url, menu)"
                [routerLinkActive]="['is-active']">Link</a>

How to extent [routerLinkActive] for custom URL to highlight link as active?

I can use ngClass but how to get url to compare with my url?

I did this:

<a [ngClass]="{'is-active': isUrl()}" routerLink="{{item._url}}" (click)="setActiveLink(i, item._url, menu)"
                [routerLinkActive]="['is-active']">{{item.title | translate}}</a>

And method is:

public isUrl(): boolean {
    const currentUrl = this.router.url;
    const arrUrl = ['replacements'];

    for (let i = 0; i < arrUrl.length; i++) {
      return currentUrl.indexOf(arrUrl[i]) > -1;
    }

    return false;
  }

It highlights all links in menu

Upvotes: 1

Views: 948

Answers (1)

Krishna Rathore
Krishna Rathore

Reputation: 9687

use routerLinkActive="class-name" and routerLinkActiveOptions="{exact:true}" for active route link?

.html file

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Skills</a>
          </li>
        <ul>
     <div>
<nav>

css/.scss file

.class-name{
    color:red;
    ...
}

Upvotes: 1

Related Questions