we can apply routerLinkActive directive along with [routerLink] simply as:
<a [routerLink]="'/profile'" routerLinkActive="active"> My Profile </a>
of course for tag <a></a>. but if we want to navigate for action as bellow:
.ts file:
navigateToMyProfile(): void {
this.router.navigate(['/profile']);
}<mat-list-item (click)="navigateToMyProfile()">
where we can apply routerLinkActive directive for above method? Best regards
Use mat-list-item as an attribute instead.
Use
mat-nav-listtags for navigation lists (i.e. lists that have anchor tags).Simple navigation lists can use the
mat-list-itemattribute on anchor tag elements directly
<mat-nav-list>
<a mat-list-item routerLink="/profile" routerLinkActive="active">My Profile</a>
</mat-nav-list>