Fixed hamburger icon angular

Question

I generated a header component using ng generate @angular/material:material-nav --name header, in this I need to have the hamburger icon fixed even if the screen size is larger. Right now it appears only when screen size is small. I need some help in fixing this. Code in stackblitz (https://angular-bfjx3s.stackblitz.io/) Thank you

Need something like this (https://console.cloud.google.com)

score 1 · Answer 1 · edited Jun 24 '19 at 06:16

1

Remove the *ngIf condition from below code in header.component.html

<button
  type="button"
  aria-label="Toggle sidenav"
  mat-icon-button
  (click)="drawer.toggle()">
  <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>

edited Jun 24 '19 at 06:16

SuperStar518

2,814
2
20
35

answered Jun 24 '19 at 06:12

nitin9nair

580
3
12

score 1 · Answer 2 · answered Jun 24 '19 at 06:14

1

You can remove the conditional statement *ngIf="isHandset$ | async" from button

answered Jun 24 '19 at 06:14

NIDHIN VINCENT

225
1
2
9

score 1 · Accepted Answer · answered Jun 24 '19 at 06:14

You need to change *ngIf condition for the hamburger button like this (or you could even remove *ngIf if you want the button to be always visible:

<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>

The code here: https://stackblitz.com/edit/angular-kutmnh

Thank you,on doing that the toolbar moves to the right now and the backdrop is not working. For smaller screen size the backdrop is working, which means I can click any where on the screen and the hamburger icon collapses. — PremKumar, Jun 24 '19 at 06:20

score 1 · Answer 4 · answered Jun 24 '19 at 07:31

Thank you everyone for trying, I found that are different breakpoints as mentioned here (Angular mat-sidenav property isHandset$ | async explain) So I changed current settings to ((isWeb$ | async) || (isTablet$ | async) || (isHandSet$ | async)) in HTML file and in TS file as follows

 isWeb$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Web)
    .pipe(
      map(result => result.matches)
    );

    isTablet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Tablet)
    .pipe(
      map(result => result.matches)
    );

    isHandSet$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches)
    );

Fixed hamburger icon angular

4 Answers4