mat-selection-list do not show checkbox on first load using router link call

I am using angular material 6.4.7 and angular/cdk 6.4.7. In below simple example:

Test.component.html:

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    
  </mat-list-option>
</mat-selection-list>

Test.Component.ts

export class ListSelectionExample {
  typesOfShoes: string[] = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
}

bs-navbar.Component.html:

<a class="dropdown-item" routerLink="/admin/test">Test List</a>

Question:

If I directly enter URL as 'http://localhost:4200/admin/test' in browser, checkbox will render and appear (working fine). But if I click from link menu from bs-navbar to go to same URL, checkbox doesn't appear (not working).

Anyone experience the same problem before (tried in both Chrome or IE browser, same issue) and how to fix it? Thank you