0

I would like to make an application with on the left, right and bottom side a sidenav, mandatory is to use the Angular Material component library (https://material.angular.io/) and together with angular-resizeable-element make all the components resizeable. This is perfectly working for the left and right sidenav because I can use the material sidenav components and simple add the mwlResizeable directive to the HTML. As seen below, this is working as expected.

<mat-sidenav mwlResizable 
             [enableGhostResize]="true"
             [resizeEdges]="{bottom: false, right: false, top: false, left: true}"
             (resizeEnd)="onResizeEnd($event)" 
             position="end" 
             #right>
</mat-sidenav>

For the bottom navpanel I found the Angular Material bottom-sheet component fitting because of the location simply.

My issue is with the bottom-sheet that its called as modal/popup like this: 

let dialogRef = dialog.open(DemoComponent, {
  width: '100vw'
});

This will open my bottom-sheet perfectly with the DemoComponent within the bottom-sheet. I was wondering if anyone had a smart solution to be able to add Directives to the openened popup so I can make it (in this case) resizeable :).

Thanks in advance.

sdev95
  • 132
  • 1
  • 11
  • You want to use resizable as an attachable behavior? Do you use `DemoComponent` somewhere else without resizable behavior? – Eldar Dec 17 '19 at 14:36
  • I would like to add the resizeable behaviour to the bottom-sheet component which is basically the outer component of the DemoComponent. ( I can add it to DemoComponent but that wont make my bottom-sheet change in size, it just adds scrollbars. – sdev95 Dec 17 '19 at 14:47
  • So you can try to apply [this](https://stackoverflow.com/questions/41298168/how-to-dynamically-add-a-directive) to your `DemoComponent`. – Eldar Dec 17 '19 at 14:52
  • Its a bit against my principles but in combination with a lack of time I made a default component which always is inside the bottomsheet, I made the resizeable handle in that component and put it on top. Then I modify the height of the sheet in a custom event. Hacky but works ;). If anyone is stumbling upon this too. – sdev95 Feb 04 '20 at 11:07

1 Answers1

0

Its a bit against my principles but in combination with a lack of time I made a default component which always is inside the bottomsheet, I made the resizeable handle in that component and put it on top. Then I modify the height of the sheet in a custom event. Hacky but works ;). If anyone is stumbling upon this too.

sdev95
  • 132
  • 1
  • 11