Angular mat-sidenav property isHandset$ | async explain

Question

<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

score 23 · Accepted Answer · answered Sep 04 '18 at 04:08

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

what does this mean ```[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"``` — Muhammad Mehdi, Dec 24 '20 at 09:54

score 0 · Answer 2 · edited Nov 22 '22 at 15:16

0

With regard to @MuhammadMehdi's comment:

[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"

is used for accessibility. People that have disabilities and for example are blind need to use a screen reader, for that purpose they are adding the 'dialog' role on the small screen size (because the menu pops out like a dialog) and 'navigation' role on the desktop size because its always displayed and used for navigation.

Here you have some more info on aria roles https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

edited Nov 22 '22 at 15:16

Eric Aya

69,473
35
181
253

answered Nov 22 '22 at 14:32

Rasistlin89

3
2

You refer to a comment and seem to provide an answer for the question asked in that comment. Is this also an answer to the question at the top of this page? If not please delete it, because https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead However, maybe you can [edit] to make this according to [answer]. That would be fine. – Yunnosch Nov 22 '22 at 16:03
@EricAya I do not get the point of your edit. You see something cleary stating that it is meant as a comment and you edit it to hide that; instead of helping with turning into an answer or at least flagging for deletion? I have to assume that you see this as an appropriate answer. In that case please edit again and turn it into the answer to the question at the top of this page which you can see in this. – Yunnosch Nov 22 '22 at 17:14
@Yunnosch I saw this answer as a complement to the other answer, that's why I edited it, but I get your point. Feel free to downvote and flag it as NAA if you think it's not worth keeping. – Eric Aya Nov 22 '22 at 20:36

Angular mat-sidenav property isHandset$ | async explain

2 Answers2

Linked