New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New router: Router link active for multiple links #8397

Closed
brandonroberts opened this Issue May 2, 2016 · 26 comments

Comments

Projects
None yet
@brandonroberts
Contributor

brandonroberts commented May 2, 2016

IMPORTANT: This repository's issues are reserved for feature requests and bug reports. Do not submit support requests here, see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question.

Steps to reproduce and a minimal demo of the problem

Use https://plnkr.co or similar -- try this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5

What steps should we try in your demo to see the problem?

Current behavior

Given the two routes

@Routes([
    { path: '/', component: Home },
    { path: '/test', component: Test }
])
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/test']">Test</a>

If I'm on the /test route, the router-link-active class is added to the link for / and for /test

Expected/desired behavior

Active class should only apply to current route

Other information

cc: @vsavkin

@nareshbhatia

This comment has been minimized.

Show comment
Hide comment
@nareshbhatia

nareshbhatia May 8, 2016

I am running into the same issue.

nareshbhatia commented May 8, 2016

I am running into the same issue.

@nickroberts

This comment has been minimized.

Show comment
Hide comment
@nickroberts

nickroberts May 10, 2016

This looks like when setting isActive in the router_link.ts file, when the href is empty (for /), the this._router.urlTree.contains(tree) function will always return true.

  private _updateTargetUrlAndHref(): void {
    let tree = this._router.createUrlTree(this._commands, this._routeSegment);
    if (isPresent(tree)) {
      this.href = this._router.serializeUrl(tree);
      this.isActive = this._router.urlTree.contains(tree);
    } else {
      this.isActive = false;
    }
  }

private _updateTargetUrlAndHref(): void {
let tree = this._router.createUrlTree(this._commands, this._routeSegment);
if (isPresent(tree)) {
this.href = this._router.serializeUrl(tree);
this.isActive = this._router.urlTree.contains(tree);
} else {
this.isActive = false;
}
}

nickroberts commented May 10, 2016

This looks like when setting isActive in the router_link.ts file, when the href is empty (for /), the this._router.urlTree.contains(tree) function will always return true.

  private _updateTargetUrlAndHref(): void {
    let tree = this._router.createUrlTree(this._commands, this._routeSegment);
    if (isPresent(tree)) {
      this.href = this._router.serializeUrl(tree);
      this.isActive = this._router.urlTree.contains(tree);
    } else {
      this.isActive = false;
    }
  }

private _updateTargetUrlAndHref(): void {
let tree = this._router.createUrlTree(this._commands, this._routeSegment);
if (isPresent(tree)) {
this.href = this._router.serializeUrl(tree);
this.isActive = this._router.urlTree.contains(tree);
} else {
this.isActive = false;
}
}

@nickroberts

This comment has been minimized.

Show comment
Hide comment
@nickroberts

nickroberts May 10, 2016

This works, but, I don't think it is a good solution:

this.isActive = this.href ? this._router.urlTree.contains(tree) : !this._router.urlTree._root.children.length;

nickroberts commented May 10, 2016

This works, but, I don't think it is a good solution:

this.isActive = this.href ? this._router.urlTree.contains(tree) : !this._router.urlTree._root.children.length;
@jeserkin

This comment has been minimized.

Show comment
Hide comment
@jeserkin

jeserkin May 14, 2016

Any workaround for the bugy behavior, that doesn't require changing source?

jeserkin commented May 14, 2016

Any workaround for the bugy behavior, that doesn't require changing source?

@Namek

This comment has been minimized.

Show comment
Hide comment
@Namek

Namek May 16, 2016

My replacement:

import {Directive, Input, Query, QueryList} from '@angular/core'
import {isBlank, isPresent} from '@angular/common/src/facade/lang'
import {Router, RouterUrlSerializer} from '@angular/router'
import {RouterLink} from '@angular/router/src/directives/router_link'


@Directive({
    selector: '[linkActive]',
    host: {
        '[class.active]': 'isRouteActive'
    }
})
export class LinkActive {
    @Input('linkActive') linkParams: any[]
    routerLink: RouterLink

    constructor(
        @Query(RouterLink) routerLinks: QueryList<RouterLink>,
        private router: Router,
        private urlSerializer: RouterUrlSerializer
    ) {
        routerLinks.changes.subscribe((_) => {
            this.routerLink = routerLinks.first
        })
    }

    ngOnInit() {
        console.log(this.linkParams)
    }

    get isRouteActive() {
        if (!this.routerLink || !this.routerLink.href)
            return false

        let thisUrl = this.urlSerializer.parse(this.routerLink.href)
        let currentUrl = this.router.urlTree

        if (!currentUrl.contains(thisUrl))
            return false

        return !this.isExactCheck || thisUrl.contains(currentUrl)
    }

    private get isExactCheck(): boolean {
        return !isBlank(this.linkParams) && isPresent(this.linkParams['exact'])
            ? this.linkParams['exact'] : true
    }
}

Usage:

<ul class="product-tabs nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a [routerLink]="['.']" class="nav-link" linkActive>
            <i class="fa fa-list-alt"></i> <b>Products</b>
        </a>
    </li>

    <li class="nav-item" *ngFor="let tab of productTabs">
        <a [routerLink]="['./', tab.pid]" class="nav-link" [linkActive]="{exact: false}">
            <i class="fa fa-inbox"></i> &nbsp;{{tab.name}}
        </a>
    </li>
</ul>

Reason behind this is that Product tab (the second <li>) contains nested tabs and the Product tab itself should be still active.

Namek commented May 16, 2016

My replacement:

import {Directive, Input, Query, QueryList} from '@angular/core'
import {isBlank, isPresent} from '@angular/common/src/facade/lang'
import {Router, RouterUrlSerializer} from '@angular/router'
import {RouterLink} from '@angular/router/src/directives/router_link'


@Directive({
    selector: '[linkActive]',
    host: {
        '[class.active]': 'isRouteActive'
    }
})
export class LinkActive {
    @Input('linkActive') linkParams: any[]
    routerLink: RouterLink

    constructor(
        @Query(RouterLink) routerLinks: QueryList<RouterLink>,
        private router: Router,
        private urlSerializer: RouterUrlSerializer
    ) {
        routerLinks.changes.subscribe((_) => {
            this.routerLink = routerLinks.first
        })
    }

    ngOnInit() {
        console.log(this.linkParams)
    }

    get isRouteActive() {
        if (!this.routerLink || !this.routerLink.href)
            return false

        let thisUrl = this.urlSerializer.parse(this.routerLink.href)
        let currentUrl = this.router.urlTree

        if (!currentUrl.contains(thisUrl))
            return false

        return !this.isExactCheck || thisUrl.contains(currentUrl)
    }

    private get isExactCheck(): boolean {
        return !isBlank(this.linkParams) && isPresent(this.linkParams['exact'])
            ? this.linkParams['exact'] : true
    }
}

Usage:

<ul class="product-tabs nav nav-tabs" role="tablist">
    <li class="nav-item">
        <a [routerLink]="['.']" class="nav-link" linkActive>
            <i class="fa fa-list-alt"></i> <b>Products</b>
        </a>
    </li>

    <li class="nav-item" *ngFor="let tab of productTabs">
        <a [routerLink]="['./', tab.pid]" class="nav-link" [linkActive]="{exact: false}">
            <i class="fa fa-inbox"></i> &nbsp;{{tab.name}}
        </a>
    </li>
</ul>

Reason behind this is that Product tab (the second <li>) contains nested tabs and the Product tab itself should be still active.

@justaniles

This comment has been minimized.

Show comment
Hide comment
@justaniles

justaniles May 22, 2016

Going off what @nickroberts said above about the issue being the way this.isActive is being set, would the correct functionality not be an equality operator for the urlTree?

  private _updateTargetUrlAndHref(): void {
    let tree = this._router.createUrlTree(this._commands, this._routeSegment);
    if (isPresent(tree)) {
      this.href = this._router.serializeUrl(tree);
      this.isActive = this._router.urlTree.contains(tree); // should be: this._router.urlTree.equals(tree)
    } else {
      this.isActive = false;
    }
  }

This would require a change to the segments.ts class, since the Tree class does not currently have an equality method.

I'm trying to determine if this functionality of the router-link-active class is intended. I did a quick test and the router-link-active would also be double applied in the case where you have two routes such as /home and /home/test.

Maybe the Angular team was trying to give the ability to highlight the parent component (Home), in addition to the child component (Test) by applying the router-link-active to both?

justaniles commented May 22, 2016

Going off what @nickroberts said above about the issue being the way this.isActive is being set, would the correct functionality not be an equality operator for the urlTree?

  private _updateTargetUrlAndHref(): void {
    let tree = this._router.createUrlTree(this._commands, this._routeSegment);
    if (isPresent(tree)) {
      this.href = this._router.serializeUrl(tree);
      this.isActive = this._router.urlTree.contains(tree); // should be: this._router.urlTree.equals(tree)
    } else {
      this.isActive = false;
    }
  }

This would require a change to the segments.ts class, since the Tree class does not currently have an equality method.

I'm trying to determine if this functionality of the router-link-active class is intended. I did a quick test and the router-link-active would also be double applied in the case where you have two routes such as /home and /home/test.

Maybe the Angular team was trying to give the ability to highlight the parent component (Home), in addition to the child component (Test) by applying the router-link-active to both?

@griter

This comment has been minimized.

Show comment
Hide comment
@griter

griter Jun 24, 2016

@brandonroberts If you get the new Angular router (https://github.com/angular/vladivostok) then you can use the routerLinkActive directive. No further action is required. Here's the example:

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li [routerLinkActive]="['active']"><a [routerLink]="['/projects']">Projects</a></li>
</ul>

I used the latest version for testing: 3.0.0-alpha.7

griter commented Jun 24, 2016

@brandonroberts If you get the new Angular router (https://github.com/angular/vladivostok) then you can use the routerLinkActive directive. No further action is required. Here's the example:

<ul class="nav navbar-nav">
  <li [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li [routerLinkActive]="['active']"><a [routerLink]="['/projects']">Projects</a></li>
</ul>

I used the latest version for testing: 3.0.0-alpha.7

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Jun 24, 2016

Contributor

Support for this has been added to the v3 router

Contributor

brandonroberts commented Jun 24, 2016

Support for this has been added to the v3 router

@andresespinosapc

This comment has been minimized.

Show comment
Hide comment
@andresespinosapc

andresespinosapc Aug 3, 2016

It still doesn't work for me :(

andresespinosapc commented Aug 3, 2016

It still doesn't work for me :(

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Aug 3, 2016

Contributor

@andresespinosapc what's your issue?

Contributor

brandonroberts commented Aug 3, 2016

@andresespinosapc what's your issue?

@andresespinosapc

This comment has been minimized.

Show comment
Hide comment
@andresespinosapc

andresespinosapc Aug 3, 2016

If I understood well, this issue have seen solved in router v3. I have versión 3.0.0.beta.1 and when I click on a routerLink different than '/', the '/' link keeps active.

andresespinosapc commented Aug 3, 2016

If I understood well, this issue have seen solved in router v3. I have versión 3.0.0.beta.1 and when I click on a routerLink different than '/', the '/' link keeps active.

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Aug 3, 2016

Contributor

@andresespinosapc you need to add an additional option to your routerLink.

[routerLinkActiveOptions]="{ exact: true }"

Then your home route will only be active if you're on the exact route. The home route with an empty path will be a partial match on all routes

Contributor

brandonroberts commented Aug 3, 2016

@andresespinosapc you need to add an additional option to your routerLink.

[routerLinkActiveOptions]="{ exact: true }"

Then your home route will only be active if you're on the exact route. The home route with an empty path will be a partial match on all routes

@andresespinosapc

This comment has been minimized.

Show comment
Hide comment
@andresespinosapc

andresespinosapc Aug 3, 2016

Thanks, it worked perfectly!

andresespinosapc commented Aug 3, 2016

Thanks, it worked perfectly!

@vijender1256

This comment has been minimized.

Show comment
Hide comment
@vijender1256

vijender1256 Aug 17, 2016

@brandonroberts If we have nested routes as illustrated, below code has dropdown menu items Generated Reports and Adhoc Reports under Reports tab. when user clicks on Reports tabs bootstrap dropdown will show and we can click on Adhoc or Generated Reports, how can we make Reports tab as active I mean hightlight it, even though we are actually clicking on Adhoc reports submenu. I dont want to highlight Adhoc report dropdown menu item but wanted to hightlight tab Reports itself.

Below is the code:

<ul class="nav navbar-nav ">
           <li><a id="cashierRiskProfile" routerLink="/cashierriskprofile" routerLinkActive="active">Cashier Risk Profile</a></li>
           <li><a id="exceptionDashboard" routerLink="/exceptionDashboard" routerLinkActive="active">Exception Dashboard</a></li>
           <li class="dropdown">
                    <a id="reports" class="dropdown-toggle" data-toggle="dropdown" routerLinkActive="active">
                     Reports
                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a routerLink="/reportDetail">Generated Reports</a></li>
                        <li><a routerLink="/heroes">Adhoc Reports</a></li>
                    </ul>
                </li>
 </ul>

vijender1256 commented Aug 17, 2016

@brandonroberts If we have nested routes as illustrated, below code has dropdown menu items Generated Reports and Adhoc Reports under Reports tab. when user clicks on Reports tabs bootstrap dropdown will show and we can click on Adhoc or Generated Reports, how can we make Reports tab as active I mean hightlight it, even though we are actually clicking on Adhoc reports submenu. I dont want to highlight Adhoc report dropdown menu item but wanted to hightlight tab Reports itself.

Below is the code:

<ul class="nav navbar-nav ">
           <li><a id="cashierRiskProfile" routerLink="/cashierriskprofile" routerLinkActive="active">Cashier Risk Profile</a></li>
           <li><a id="exceptionDashboard" routerLink="/exceptionDashboard" routerLinkActive="active">Exception Dashboard</a></li>
           <li class="dropdown">
                    <a id="reports" class="dropdown-toggle" data-toggle="dropdown" routerLinkActive="active">
                     Reports
                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a routerLink="/reportDetail">Generated Reports</a></li>
                        <li><a routerLink="/heroes">Adhoc Reports</a></li>
                    </ul>
                </li>
 </ul>
@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Aug 17, 2016

Contributor

@vijender1256 the routerLink has to be a descendant element of the of where the routerLinkActive element is. If you need a more custom approach, the router has a isActive method. So you inject the Router into your component and use it in the html below

<ul class="nav navbar-nav ">
           <li><a id="cashierRiskProfile" routerLink="/cashierriskprofile" routerLinkActive="active">Cashier Risk Profile</a></li>
           <li><a id="exceptionDashboard" routerLink="/exceptionDashboard" routerLinkActive="active">Exception Dashboard</a></li>
           <li class="dropdown">
                    <a id="reports" class="dropdown-toggle" data-toggle="dropdown" [class.active]="router.isActive('/reportDetail') || router.isActive('/heroes')">
                     Reports
                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a routerLink="/reportDetail">Generated Reports</a></li>
                        <li><a routerLink="/heroes">Adhoc Reports</a></li>
                    </ul>
                </li>
 </ul>
Contributor

brandonroberts commented Aug 17, 2016

@vijender1256 the routerLink has to be a descendant element of the of where the routerLinkActive element is. If you need a more custom approach, the router has a isActive method. So you inject the Router into your component and use it in the html below

<ul class="nav navbar-nav ">
           <li><a id="cashierRiskProfile" routerLink="/cashierriskprofile" routerLinkActive="active">Cashier Risk Profile</a></li>
           <li><a id="exceptionDashboard" routerLink="/exceptionDashboard" routerLinkActive="active">Exception Dashboard</a></li>
           <li class="dropdown">
                    <a id="reports" class="dropdown-toggle" data-toggle="dropdown" [class.active]="router.isActive('/reportDetail') || router.isActive('/heroes')">
                     Reports
                    <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a routerLink="/reportDetail">Generated Reports</a></li>
                        <li><a routerLink="/heroes">Adhoc Reports</a></li>
                    </ul>
                </li>
 </ul>
@vijender1256

This comment has been minimized.

Show comment
Hide comment
@vijender1256

vijender1256 Aug 19, 2016

@brandonroberts thank you, I am getting below error:

image

vijender1256 commented Aug 19, 2016

@brandonroberts thank you, I am getting below error:

image

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Aug 19, 2016

Contributor

@vijender1256 you need to inject the Router into your component

import {Router} from '@angular/router';

constructor(private router: Router) {}
Contributor

brandonroberts commented Aug 19, 2016

@vijender1256 you need to inject the Router into your component

import {Router} from '@angular/router';

constructor(private router: Router) {}
@kushalpandya

This comment has been minimized.

Show comment
Hide comment
@kushalpandya

kushalpandya Sep 15, 2016

I'm still facing this problem, here's my routing config.

    { path: '', redirectTo: '/home', pathMatch: 'full' },
    {
        path: 'home',
        component: HomeComponent,
        children: [
            { path: '', component: ActivityStreamComponent },
            { path: 'recent', component: RecentActivityComponent },
            { path: 'archive', component: ArchiveActivityComponent }
        ]
    },
    { path: 'people', component: PeopleComponent },
    { path: 'about', component:AboutComponent }

And within template of HomeComponent, I'm having nav for child routes.

<div class="pills-wrapper">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a routerLink="" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Activity Stream</a>
        </li>
        <li class="nav-item">
            <a routerLink="recent" class="nav-link" routerLinkActive="active">Recent</a>
        </li>
        <li class="nav-item">
            <a routerLink="archive" class="nav-link" routerLinkActive="active">Archive</a>
        </li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

And as I have mentioned routerLinkActiveOptions for first child route, it doesn't add active class at all, while remaining child routes work fine. Also, if I remove routerLinkActiveOptions, I get the same original problem of active class being applied on both blank route (which is Activity Stream) as well as any other route I navigate to.

Is it anything I'm missing here? I'm current using @angular/router v3.0.0-rc.2.

kushalpandya commented Sep 15, 2016

I'm still facing this problem, here's my routing config.

    { path: '', redirectTo: '/home', pathMatch: 'full' },
    {
        path: 'home',
        component: HomeComponent,
        children: [
            { path: '', component: ActivityStreamComponent },
            { path: 'recent', component: RecentActivityComponent },
            { path: 'archive', component: ArchiveActivityComponent }
        ]
    },
    { path: 'people', component: PeopleComponent },
    { path: 'about', component:AboutComponent }

And within template of HomeComponent, I'm having nav for child routes.

<div class="pills-wrapper">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a routerLink="" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Activity Stream</a>
        </li>
        <li class="nav-item">
            <a routerLink="recent" class="nav-link" routerLinkActive="active">Recent</a>
        </li>
        <li class="nav-item">
            <a routerLink="archive" class="nav-link" routerLinkActive="active">Archive</a>
        </li>
    </ul>
    <div class="tab-content">
        <router-outlet></router-outlet>
    </div>
</div>

And as I have mentioned routerLinkActiveOptions for first child route, it doesn't add active class at all, while remaining child routes work fine. Also, if I remove routerLinkActiveOptions, I get the same original problem of active class being applied on both blank route (which is Activity Stream) as well as any other route I navigate to.

Is it anything I'm missing here? I'm current using @angular/router v3.0.0-rc.2.

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Sep 15, 2016

Contributor

@kushalpandya you should trying using the home path for your link instead of the empty path since its a redirect.

Contributor

brandonroberts commented Sep 15, 2016

@kushalpandya you should trying using the home path for your link instead of the empty path since its a redirect.

@Rajdeepc

This comment has been minimized.

Show comment
Hide comment
@Rajdeepc

Rajdeepc May 18, 2017

routerLinkActive="active" in the anchor tag solves the problem in v 3

Rajdeepc commented May 18, 2017

routerLinkActive="active" in the anchor tag solves the problem in v 3

@Ashokkumar1995

This comment has been minimized.

Show comment
Hide comment
@Ashokkumar1995

Ashokkumar1995 Jul 21, 2017

<nav class="navbar navbar-default">

<ul class="nav navbar-nav">
   
  <li><a routerLink="side" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Test</a></li>
  <li><a routerLink="sideLibrary" routerLinkActive="active">Library</a></li>
  <li><a routerLink="sideReport" routerLinkActive="active">Report</a></li>
</ul>
i have added routerLinkActiveOptions but i still didnt get active change in tab

Ashokkumar1995 commented Jul 21, 2017

<nav class="navbar navbar-default">

<ul class="nav navbar-nav">
   
  <li><a routerLink="side" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Test</a></li>
  <li><a routerLink="sideLibrary" routerLinkActive="active">Library</a></li>
  <li><a routerLink="sideReport" routerLinkActive="active">Report</a></li>
</ul>
i have added routerLinkActiveOptions but i still didnt get active change in tab
@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Jul 21, 2017

Contributor

@Ashokkumar1995 the "active" class should be on the li element and not the a element

Contributor

brandonroberts commented Jul 21, 2017

@Ashokkumar1995 the "active" class should be on the li element and not the a element

@grungondola

This comment has been minimized.

Show comment
Hide comment
@grungondola

grungondola Aug 14, 2017

@brandonroberts according to the documentation here https://angular.io/api/router/RouterLinkActive the RouterLinkActive directive goes on the anchor tag with the RouterLink directive.

grungondola commented Aug 14, 2017

@brandonroberts according to the documentation here https://angular.io/api/router/RouterLinkActive the RouterLinkActive directive goes on the anchor tag with the RouterLink directive.

@brandonroberts

This comment has been minimized.

Show comment
Hide comment
@brandonroberts

brandonroberts Aug 14, 2017

Contributor

@grungondola the router guide states that it can be on the parent element also.

The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected "active" route. The router adds the active CSS class to the element when the associated RouterLink becomes active. You can add this directive to the anchor or to its parent element.

Contributor

brandonroberts commented Aug 14, 2017

@grungondola the router guide states that it can be on the parent element also.

The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected "active" route. The router adds the active CSS class to the element when the associated RouterLink becomes active. You can add this directive to the anchor or to its parent element.

@roopkt

This comment has been minimized.

Show comment
Hide comment
@roopkt

roopkt Oct 2, 2018

Hi Can I match partially and make one link active ? In below example profile link should be active when I go to any user.

      <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
          <a [routerLink]="['/user',1]"> Profile</a>
        </li>

Here on click I want to take it to user one but if via routing manually from browser I happened to go to user/3 I still want to active profile link. I tried doing exact:false it is still not active when i go to user/3

UPDATED

When I tried router.isActive("/user") it is making link active for any user selection which is what I wanted is it correct though ?

   <li [class.active]="router.isActive('/user')" [routerLinkActive]="['active']" [routerLinkActiveOptions]=" {exact:false}">
          <a [routerLink]="['/user',1]"> Profile</a>
        </li>

roopkt commented Oct 2, 2018

Hi Can I match partially and make one link active ? In below example profile link should be active when I go to any user.

      <li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
          <a [routerLink]="['/user',1]"> Profile</a>
        </li>

Here on click I want to take it to user one but if via routing manually from browser I happened to go to user/3 I still want to active profile link. I tried doing exact:false it is still not active when i go to user/3

UPDATED

When I tried router.isActive("/user") it is making link active for any user selection which is what I wanted is it correct though ?

   <li [class.active]="router.isActive('/user')" [routerLinkActive]="['active']" [routerLinkActiveOptions]=" {exact:false}">
          <a [routerLink]="['/user',1]"> Profile</a>
        </li>
@petrskalicka

This comment has been minimized.

Show comment
Hide comment
@petrskalicka

petrskalicka Oct 16, 2018

I use this simple CSS solution:

.active:not([href='/']) {background-color: blue}

petrskalicka commented Oct 16, 2018

I use this simple CSS solution:

.active:not([href='/']) {background-color: blue}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment