Angular mat-sidenav property isHandset$ | async explain

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'push' : 'push'" [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">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>

I do not understand what is written in the code (isHandset$ | async)please explain

'Handset' is one of the breakpoint names of angular material layout. The list of breakpoint names is Handset, Tablet, Web, HandsetPortrait, TabletPortrait, WebPortrait, HandsetLandscape, TabletLandscape, WebLandscape.

Please check https://material.io/design/layout/responsive-layout-grid.html#breakpoints for more information about material layout breakpoints

In your example above, isHandset$ is coming from the corresponding component .ts file. Please look for code similar to below in your component file.

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

When you resize the browser and when browser width matches with handset (mobile phone screen) width isHandset$ sets to true. ! (isHandset$ | async) in turn sets 'opened' attribute of sidenav drawer to false and collapses the sidenav drawer.

As isHandset$ is an Observable property, therefore 'async' pipe is used for the asynchronous call.