Angular 5 Material - How to set mat-nav-list anchor link to be active on click

How do i set anchor links to be active in my implementation.

.html

<mat-nav-list class="conversation-list">
<mat-list-item *ngFor="let conversation of conversations">
<a (click)="goToChat(conversation)">{{getOtherUsers(conversation)}}</a>
</mat-list-item>
</mat-nav-list>

<div class="chat-box">
<router-outlet></router-outlet>
</div>


.ts

goToChat(conversation) {
this.router.navigate(['main/chat/', conversation._id]);
}


.routing.module.ts

import { ChatComponent } from './chat.component';
import { ChatDetailComponent } from './chat-detail/chat-detail.component';

const CHAT_ROUTES = [
{
path: '',
component: ChatComponent,
children: [
{
path: ':id',
component: ChatDetailComponent
}
]
},
];


The above code loops over a users conversation and creates a list of users they are chatting with. Each list item is a link to a chat component on the right of the page. When user clicks a link and i want it to be set to active.

Continue reading...