Setelah data berhasil kita retrieve, berikutnya adalah kita akan menampilkan list users pada sidenav.
Angular Material component yang akan kita gunakan adalah Navigation List, dokumentasi lengkap lihat di https://material.angular.io/components/list/overview#navigation-lists
Buka file sidenav.component.html, lalu ubah code list dari code sebelumnya menggunakan navigation list.
<mat-drawer-container class="app-sidenav-container" autosize>
<mat-drawer #drawer class="app-sidenav mat-elevation-z10" [mode]="isScreenSmall ? 'over' : 'side' " [opened]="!isScreenSmall">
<mat-toolbar color="primary">
<span>Contact</span>
</mat-toolbar>
<mat-nav-list>
<mat-list-item *ngFor="let user of users | async">
<a matLine href="#">{{ user.name }}</a>
</mat-list-item>
</mat-nav-list>
<!-- diganti dengan nav list diatas -->
<!-- <mat-list role="list">
<mat-list-item role="listitem">Item 1</mat-list-item>
<mat-list-item role="listitem">Item 2</mat-list-item>
<mat-list-item role="listitem">Item 3</mat-list-item>
</mat-list> -->
</mat-drawer>
<div class="app-sidenav-content">
<app-toolbar (toggleSidenav)="drawer.toggle()"></app-toolbar>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
</div>
</mat-drawer-container>
Sesuai ekspektasi, sekarang user sudah bisa ditampilkan pada sidenav.
Pada modul berikutnya kita akan mempercantik tampilan dengan menambahkan avatar.