title: Angular 5 Material - How to set mat-nav-list anchor link to be active on click
body: <p>How do i set anchor links to be active in my implementation.</p>
  
  <p><strong>.html</strong></p>
  
  <pre><code>&lt;mat-nav-list class="conversation-list"&gt;
      &lt;mat-list-item *ngFor="let conversation of conversations"&gt;
          &lt;a (click)="goToChat(conversation)"&gt;{{getOtherUsers(conversation)}}&lt;/a&gt;
      &lt;/mat-list-item&gt;
  &lt;/mat-nav-list&gt;
  
  &lt;div class="chat-box"&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>.ts</strong></p>
  
  <pre><code>goToChat(conversation) {
      this.router.navigate(['main/chat/', conversation._id]);
  }
  </code></pre>
  
  <p><strong>.routing.module.ts</strong></p>
  
  <pre><code>import { ChatComponent } from './chat.component';
  import { ChatDetailComponent } from './chat-detail/chat-detail.component';
  
  const CHAT_ROUTES = [
      {
          path: '',
          component: ChatComponent,
          children: [
              {
                  path: ':id',
                  component: ChatDetailComponent
              }
          ]
      },
  ];
  </code></pre>
  
  <p>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.</p>