router.isActive and routerLinkActive to support more options #13205

vsavkin · 2016-12-02T18:35:25Z

Currently router.isActive and routerLinkActive support only one option exact:boolean.

When exact = true, isActive will return true if:

queryParams match exactly
the url has the same url segments with all "path" equal
matrix params are ignored

When exact = false, isActive will return true if:

The queryParams of the containee is a subset of the queryParams of the container
The url tree of the containee is a subtree of the url tree of the container
Matrix params are ignored

We should replace the exact=true with a string type that supports more options:

Include/exclude queryParams
Include/exclude fragment
Include/exclude matrix params

The text was updated successfully, but these errors were encountered:

artaommahe · 2017-01-18T09:02:44Z

@vsavkin what about intersection option for isActive method?
I have this route

/:slug/chat
// /user1/chat
// /user2/chat

And need to check that current url is any of them. I would be cool to has intersection mode check like this

// current url /user1/chat
// route segments [ '/user1', 'chat' ]
router.isActive([ null, 'chat' ], { type: 'intersection' })  === true

more complex example route

// route /:param1/static1/:param2/static2

// url /123/static1/456/static2
router.isActive([ null, 'static1', null, 'static2' ], { type: 'intersection' })  === true
router.isActive([ null, null, 456, 'static2' ], { type: 'intersection' })  === true
router.isActive([ null, 'static1', 456 ], { type: 'intersection' })  === true

doorman02 · 2017-02-02T10:55:55Z

What is the current state of this. Is it possible to ignore/exclude query parameters when routerLinkActiveOptions is set to exact?

DzmitryShylovich · 2017-02-02T11:00:10Z

ignore/exclude query parameters when routerLinkActiveOptions is set to exact?

nope

What is the current state of this

it will be a part of 4.0 release

doorman02 · 2017-02-02T11:02:13Z

Ok thanks for the info, do you know when v4 will be released approx?

DzmitryShylovich · 2017-02-02T11:03:32Z

march-april

doorman02 · 2017-03-24T10:31:31Z

Hi @DzmitryShylovich do you know if Include/exclude queryParams is included in the new v4 release?

DzmitryShylovich · 2017-03-24T10:32:48Z

@doorman02 nope, it wasn't included. there were more important tasks.

doorman02 · 2017-03-24T10:39:55Z

Ok, thanks just checking :)

overflew · 2017-05-09T03:52:52Z

Can this also include similar handling for secondary routes?

E.g.: Some way that .isActive('/profile/home') would return true when on '/profile/home(modal:confirmation)'.

I have a plnkr + detail here: http://stackoverflow.com/questions/43647979/angular-router-should-isactive-identify-the-main-route-when-a-secondary-rou

nthypes · 2017-07-13T15:32:07Z

News on this ?

tytskyi · 2017-07-13T15:41:13Z

@antonioasmoura nothing changed, docs: https://angular.io/api/router/RouterLinkActive

devforey · 2017-09-07T06:47:47Z

A workaround for ignoring the queryParams for routerActive with exact: true would be to create your own condition to check if the current URL without the query params is equal to the routerLink.

<a routerLink="/my-link" [class.active]="isLinkActive('/my-link')"></a>

public isLinkActive(url: string): boolean {
  return (('/' + this.activatedRoute.snapshot.url.join('/')) === url);
}

webdeveloperninja · 2017-12-02T11:08:46Z

Any news on this?

webdeveloperninja · 2017-12-02T11:09:03Z

Im on angular 5 still have to use this hack?

xMarkusSpringerx · 2018-01-25T14:19:42Z

Any news about this topic? I would also need the possibility to set a route to active which some restrictings etc.

/store/ui/
/store/ui/new
/store/ui/news
/store/ui/friends

I would need sth like an ignore where I can set that the /store/ui should be ignored while evaluating the current active route.

Saonela · 2018-03-06T13:55:37Z

Still waiting... This is really annoying

anuragd7 · 2018-03-15T10:28:36Z

+1

TobiasMalikowski · 2018-04-21T11:05:53Z

+1

cakeinpanic · 2018-05-07T09:46:16Z

+1

sirBlond · 2018-05-14T16:32:21Z

Here's my workaround :) similar to what @devforey offered, but it uses Router class instead of ActivatedRoute so that it could work from child component.

public isLinkActive(url) {
    let charPos = this.router.url.indexOf('?');
    let cleanUrl = charPos !== -1 ? this.router.url.slice(0, charPos) : this.router.url;
    return (cleanUrl === url);
}

gozeon · 2018-05-29T03:33:29Z

see doc & see example

sayax · 2018-05-29T04:21:34Z

Or you could just use QueryParamsHandling="merge" which solves the problem

tinyweasel · 2018-05-29T09:22:21Z

Why isn't this sorted yet on 5? Seems like a fairly common use case.

Halfist · 2018-06-18T09:41:03Z

Was this added in Angular 6?

This commit adds more configurability to the `Router#isActive` method. It allows tuning individual match options for query params and the url tree, which were either both partial or both exact matches in the past. Additionally, it also allows matching against the fragment and matrix parameters. fixes angular#13205

This commit adds more configurability to the `Router#isActive` method and `RouterLinkActive#routerLinkActiveOptions`. It allows tuning individual match options for query params and the url tree, which were either both partial or both exact matches in the past. Additionally, it also allows matching against the fragment and matrix parameters. fixes angular#13205

This commit adds more configurability to the `Router#isActive` method and `RouterLinkActive#routerLinkActiveOptions`. It allows tuning individual match options for query params and the url tree, which were either both partial or both exact matches in the past. Additionally, it also allows matching against the fragment and matrix parameters. fixes angular#13205 BREAKING CHANGE: The type of the `RouterLinkActive.routerLinkActiveOptions` input was expanded to allow more fine-tuned control. Code that previously read this property may need to be updated to account for the new type.

sviat9440 · 2021-01-12T16:24:14Z

Any news?

sviat9440 · 2021-01-12T16:25:53Z

@petebacondarwin @gkalpak

petebacondarwin · 2021-01-12T16:41:23Z

@sviat9440 - this issue is being dealt with by @atscott in #40303

This commit adds more configurability to the `Router#isActive` method and `RouterLinkActive#routerLinkActiveOptions`. It allows tuning individual match options for query params and the url tree, which were either both partial or both exact matches in the past. Additionally, it also allows matching against the fragment and matrix parameters. fixes angular#13205 BREAKING CHANGE: The type of the `RouterLinkActive.routerLinkActiveOptions` input was expanded to allow more fine-tuned control. Code that previously read this property may need to be updated to account for the new type.

angular#40303) This commit adds more configurability to the `Router#isActive` method and `RouterLinkActive#routerLinkActiveOptions`. It allows tuning individual match options for query params and the url tree, which were either both partial or both exact matches in the past. Additionally, it also allows matching against the fragment and matrix parameters. fixes angular#13205 BREAKING CHANGE: The type of the `RouterLinkActive.routerLinkActiveOptions` input was expanded to allow more fine-tuned control. Code that previously read this property may need to be updated to account for the new type. PR Close angular#40303

vsavkin added comp: router feature labels Dec 2, 2016

vsavkin mentioned this issue Dec 2, 2016

routerLinkActiveOptions doesn't exactly match with matrix url notation parameters #13093

Closed

zoechi mentioned this issue Dec 30, 2016

routerLinkActive with [queryParams] is broken (worked in v2.0.2) #13098

Open

vicb mentioned this issue Jan 5, 2017

feat(router): attach 'router-link-active' class automatically #13341

Closed

ngbot bot added this to the Backlog milestone Jan 23, 2018

Aparad mentioned this issue Aug 20, 2020

[BUG] Side navigation menu buttons deactivate if queryParams are not matched with button link tranquilitybase-io/tb-eagle-console#217

Closed

atscott mentioned this issue Jan 4, 2021

feat(router): Add more find-tuned control in `routerLinkActiveOptions` #40303

Closed

petebacondarwin added the state: has PR label Jan 12, 2021

zarend closed this in 6c05c80 Feb 24, 2021

angular / angular

router.isActive and routerLinkActive to support more options #13205

router.isActive and routerLinkActive to support more options #13205

vsavkin commented Dec 2, 2016 •

edited by jasonaden

artaommahe commented Jan 18, 2017

doorman02 commented Feb 2, 2017 •

edited

DzmitryShylovich commented Feb 2, 2017 •

edited

doorman02 commented Feb 2, 2017

DzmitryShylovich commented Feb 2, 2017

doorman02 commented Mar 24, 2017

DzmitryShylovich commented Mar 24, 2017

doorman02 commented Mar 24, 2017

overflew commented May 9, 2017

nthypes commented Jul 13, 2017

tytskyi commented Jul 13, 2017

devforey commented Sep 7, 2017

webdeveloperninja commented Dec 2, 2017

webdeveloperninja commented Dec 2, 2017

xMarkusSpringerx commented Jan 25, 2018 •

edited

Saonela commented Mar 6, 2018

anuragd7 commented Mar 15, 2018

TobiasMalikowski commented Apr 21, 2018

cakeinpanic commented May 7, 2018

sirBlond commented May 14, 2018

gozeon commented May 29, 2018

sayax commented May 29, 2018

tinyweasel commented May 29, 2018

Halfist commented Jun 18, 2018

sviat9440 commented Jan 12, 2021

sviat9440 commented Jan 12, 2021

petebacondarwin commented Jan 12, 2021

angular / angular

router.isActive and routerLinkActive to support more options #13205

router.isActive and routerLinkActive to support more options #13205

Comments

vsavkin commented Dec 2, 2016 • edited by jasonaden

artaommahe commented Jan 18, 2017

doorman02 commented Feb 2, 2017 • edited

DzmitryShylovich commented Feb 2, 2017 • edited

doorman02 commented Feb 2, 2017

DzmitryShylovich commented Feb 2, 2017

doorman02 commented Mar 24, 2017

DzmitryShylovich commented Mar 24, 2017

doorman02 commented Mar 24, 2017

overflew commented May 9, 2017

nthypes commented Jul 13, 2017

tytskyi commented Jul 13, 2017

devforey commented Sep 7, 2017

webdeveloperninja commented Dec 2, 2017

webdeveloperninja commented Dec 2, 2017

xMarkusSpringerx commented Jan 25, 2018 • edited

Saonela commented Mar 6, 2018

anuragd7 commented Mar 15, 2018

TobiasMalikowski commented Apr 21, 2018

cakeinpanic commented May 7, 2018

sirBlond commented May 14, 2018

gozeon commented May 29, 2018

sayax commented May 29, 2018

tinyweasel commented May 29, 2018

Halfist commented Jun 18, 2018

sviat9440 commented Jan 12, 2021

sviat9440 commented Jan 12, 2021

petebacondarwin commented Jan 12, 2021

vsavkin commented Dec 2, 2016 •

edited by jasonaden

doorman02 commented Feb 2, 2017 •

edited

DzmitryShylovich commented Feb 2, 2017 •

edited

xMarkusSpringerx commented Jan 25, 2018 •

edited