How can I close a mat-drawer in Angular when the user slides it away from the container?

Question

I have a mat-drawer in my Angular application that can be opened and closed by clicking a button. However, I also want to allow the user to close the drawer by sliding it away from the container. How can I achieve this functionality?

<div class="widget-map-container">
<mat-card class="mat-elevation-z2 card p-0">
<mat-drawer-container [hasBackdrop]="false" class="mat-drawer-container">
  <mat-drawer mode="over" [opened]="sidebar.open" position="end" class="sidebar">
    <app-list-markers-areas
      [areas]="geometricLayers.areas"
      [markers]="geometricLayers.markers"
      (closeEvent)="sidebar.open = !sidebar.open"
      (itemSelectEvent)="mapService.centerOnGeometryLayer($event, map)"
      class="sidebar-list"
    ></app-list-markers-areas>
  </mat-drawer>
  <mat-drawer-content>
    <div class="map-container" (resized)="resizeEvent$.next()" [id]="mapHtmlElementId" (click)="closeSidebar()"></div>
  </mat-drawer-content>
</mat-drawer-container>

I want close the mat-drawer in line 4 when user slide

Can anyone provide guidance on how to implement this functionality in my Angular application? Any help would be greatly appreciated!

Answer 1

You can set hasBackdrop="true" on mat-drawer-container element.