step_6.md

• Step 1
• Step 2
• Step 3
• Step 4
• Step 5
• Step 6 <-
• Step 7
• Step 8

Step 6 setup demo

Step 6 completed demo

Step 6

In this step, you will add a menu to the toolbar with a button to log out.

Look at the docs and try this on your own! Get the menu working before you work on the icon.

You need to add the MatMenuModule to AppModule.

Here's the code for the menu:

  <button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item class="menu-button">Log out</button>
  </mat-menu>

And a little bit of CSS:

.menu-button {
  grid-area: menu;
}

mat-menu {
  display: none
}