Menampilkan Angular Material Toolbar Pada Component Toolbar

by

Buka file toolbar.component.html, lalu tambahkan Angular Material toolbar component.

<mat-toolbar color="primary">
    <span>My Application</span>
</mat-toolbar>

Lalu ubah css rule dari class app-sidenav-content pada file sidenav.component.scss

.app-sidenav-container {
    flex: 1;
    width: 100%;
    min-width: 100%;

    height: 100%;
    min-height: 100%;
  }
  
  .app-sidenav-content {
    display: flex;
    height: 100%;

    //rule baru
    flex-direction: column;
    
    //hapus rule dibawah
    // align-items: center;
    // justify-content: center;
  }
  
  .app-sidenav {
    width: 240px;
  }

Sampai disini layout aplikasi sudah mulai terbentuk lebih jelas.

Pada modul selanjutnya kita akan mulai melakukan customizing sidenav lebih mendalam.

Sharing is caring:

Leave a Comment