CODEWITHSUNDEEP
angularangular-routerrouterlinkrouterlinkactive
PCK
PCK

Reputation: 1444

How can I use relativeTo property in html template along with routerActive?

I need to use 'relativeTo' property as well as 'routerLinkActive' directive in my application. Having a click listener function that routes using 

router.navigate(this.router.navigate(['path']{relativeTo:this.route});

would be okay. But in that case I cannot use the routerLinkActive directive.

How can I simultaneously use both?

Upvotes: 9

Views: 18350

Answers (2)

Daniel Gimenez
Daniel Gimenez

Reputation: 20609

While the accepted answer works for the specific circumstance in the OP's example, it's not entirely correct (Also I have no idea what ^ is - that might be plain wrong or obsolete).

The RouterLink directive has many inputs, one of which is relativeTo. It works just like router.navigate's relativeTo option, allowing an ActivatedRoute to be passed.

A useful case for this is if you have a variable number of route parameters, and you want to be sure you're going back to parent. In the code below, route is the ActivatedRoute injected into a component. The link will safely go back up to the parent.

<a [routerLink]="'.'" [relativeTo]="route.parent">To Parent</a>

Upvotes: 3

be4code
be4code

Reputation: 698

RelativeTo is by default set to currently activated route. In template you can use . or ^ in route name.

More about relative navigation:
https://stackoverflow.com/a/38808116/1356669
https://angular.io/guide/router#relative-navigation

Upvotes: 9

Related Questions