Как изменить угловое меню материала гамбургера при нажатии? - PullRequest
Новая
       4

Как изменить угловое меню материала гамбургера при нажатии?

0 голосов
/ 18 октября 2019

Я создаю приложение angular 7 и использую боковую навигационную панель для угловых материалов. Я хочу изменить меню гамбургера на значок крестика, когда я нажимаю на появлении боковой навигации и закрытии боковой навигации, а затем на крестообразной иконке меняется на меню гамбургера. icon. 

//html code
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #drawer class="sidenav" fixedInViewport="true"
  [attr.role]="'dialog'"
  [mode]="'over'"
  [opened]="!(isHandset$ | async)">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
  <a mat-list-item href="#">Link 1</a>
  <a mat-list-item href="#">Link 2</a>
  <a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="true">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span>web-doctor</span>
</mat-toolbar>

<div style="height: 500px">abc</div>
<ng-content>
</ng-content>

</mat-sidenav-content>
</mat-sidenav-container>

Ниже файла css 

   //css
   .sidenav-container {
   height: 100%;
   }

  .sidenav {
  width: 200px;
  margin-top: 72px;
  }

 .sidenav .mat-toolbar {
  background: inherit;
  }

 #drawer {
 position: fixed;
 }

 .mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
 }

1 Ответ

1 голос
/ 18 октября 2019

Вы можете использовать ngIf для этого. 

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()"
    *ngIf="true">
    <mat-icon aria-label="Side nav toggle icon" *ngIf="!drawer.opened; else showCross">
      menu
    </mat-icon>
    <ng-template #showCross>
      <mat-icon aria-label="Side nav toggle icon">close</mat-icon>
    </ng-template>
  </button>
  <span>web-doctor</span>
</mat-toolbar>
...