Menambahkan Menu Pada Toolbar

Pada modul ini kita akan menambahkan menu pada toolbar. Dokumentasi dapat dilihat di:

• Angular Material Toolbar
• Angular Material Menu

Buka file toolbar.component.cs, lalu tambahkan css rule berikut

$iconWidth : 56px;

.sidenav-toggle{
    display: none;

    padding: 0;
    margin: 8px;
    min-width: $iconWidth;

    @media (max-width: 720px) {
        display: flex ;
        align-items: center;
        justify-content: center;
    }

    mat-icon{
        font-size: 30px;
        height: $iconWidth;
        width: $iconWidth;
        line-height: $iconWidth;
        color: white;
    }
}

//space untuk toolbar
.example-spacer {
    flex: 1 1 auto;
  }

Buka file toolbar.component.html, lalu tambahkan button pada toolbar untuk menampilkan menu.

<mat-toolbar color="primary">
    <button class="sidenav-toggle" mat-button (click)="toggleSidenav.emit()">
        <mat-icon>menu</mat-icon>
    </button>
    <span>Contact Manager</span>
    <!-- menambahkan menu pada toolbar -->
    <span class="example-spacer"></span>
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Add Contact</button>
    </mat-menu>
</mat-toolbar>

Sesuai ekspektasi, menu untuk add new contact berhasil ditambahkan.

Pada modul berikutnya kita akan menambahkan code untuk menampilkan form ketika menu Add Contact di click.