Resizeable angular-material drawer with collapsing content

0
votes

I'm trying to create a resizeable mat-drawer that changes/collapses its content when it gets resized to a certain min-width. To turn the mat-drawer into a resizeble element, I've used this library and it seems to work quite nicely already.

The only problem I'm facing is that I can't seem to collapse the content while dragging the resize bar, it's only changed after the mouse-up event is triggered. What am I doing wrong here?

Here's a reproducible example on stackblitz: https://stackblitz.com/edit/angular-kepsi2?file=src/app/sidenav-drawer-overview-example.html

1
angularangular-material

1 Answers

1
votes

Just remove the [enableGhostResize]="true" and use the (resizing) event instead of the (resizingEnd)

  <mat-drawer class="custom-drawer" mode="side" opened mwlResizable [ngStyle]="resizeStyle" [validateResize]="resizeValidate" [resizeEdges]="{right: true}" (resizing)="onResizeEnd($event)">

https://angular-kepsi2-bvnviu.stackblitz.io/