The native angular directive [routerLinkActive]
does not fit well with <ion-item/>
component: routerLinkActive works with element’s classes, ion-item change its appearance using the [color
] attribute.
This custom directive solves this problem.
import {Directive, Input, OnDestroy, OnInit} from '@angular/core'; import {IonItem} from "@ionic/angular"; import {NavigationEnd, Router, RouterLink} from "@angular/router"; import {filter, map, tap} from "rxjs/operators"; import {Subscription} from "rxjs"; @Directive({ selector: '[ionRouterLinkActive]' }) export class IonRouterLinkActiveDirective implements OnInit, OnDestroy { private handler: Subscription; constructor(private router: Router, private ionItem: IonItem, private rl: RouterLink) { } ngOnInit(): void { this.handler = this.router.events.pipe( filter(x => { return x instanceof NavigationEnd }), map(() => { return this.rl && this.router.isActive(this.rl.urlTree, false); }), tap(isActive => { this.ionItem.color = isActive ? "secondary" : null; }) ).subscribe(); } ngOnDestroy() { this.handler.unsubscribe(); } }
<ion-item routerLink="sample" ionRouterLinkActive> </ion-item>