Menu
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?
469
The object { relativeTo: this. router} ensures that the path remains relative to its parent path.
Create the header component that contains the navigation links. Then apply the “routerLinkActive” on each router link and provide the CSS class to this property. Here we have created the “active” class in CSS file. Provide the { exact : true } to the root route to avoid multiple active router links.
Just like we had a <router-outlet></router-outlet> for the root application component, we would have a router outlet inside the ProductDetails component. The components corresponding to the child routes of product-details would be placed in the router outlet in ProductDetails .
routerLinkActive is simply an indicator of whether this link represents the active route. @jessepinho - Tried it - [routerLinkActive]="'active'" will only work if you also have [routerLink] in the a-tag. If you had (click)="navitageTo('/route')" instead of [routerLink], and in that function, you called this.
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
71
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
