Minimize Angular Material Dialog

2
votes

Can anyone please help me on how I can keep the angular material dialog minimized like below? I want to open multiple dialog's and able to switch between them. Is this possible in angular material (I was only be able to open stacked dialog's using material dialog component)? enter image description here

3
angularangular-materialangular-material-6
There is no minimized dialog feature in Angular Material. - Reactgular
Dialogs are never used that way Material Design. They only open and close - and never hide or minimize. You are looking for a component that doesn't exist in Angular Material - the closest thing visually would be snack bars, but they too are never used that way. You might be able to hack a snack bar to do it - otherwise you are looking at creating your own custom component. - G. Tranter
AngularJS or Angular? Google Fonts is built with AngularJS Material, but your question has the angular tag. - Edric
@Edric its angular. i was inspired from the google fonts website and was having similar requirement. so checking if it was possible. - Krishna
@Krishna You can try to use an overlay. - Edric

3 Answers

1
votes

Created a angular 2 material popup which can be minimized https://stackblitz.com/edit/angular-matminidialog

concept wise: 1. it collects the needed elements of a popup in a containers array containers = [{ButtonLabel:"First", dialogId:0, animal: "cat"}];

  1. On closing a dialog, uses this.dialogRef.close so an object of data can be returned back

  2. A new id is added and given as dialogId (a new property)

0
votes

I think you should start creating at least a bin on Codesandbox or Stackblitz. Also it's usually not so much convenient to customize that much an existing and maintained official library. Instead I would suggest you to pass the data in another newly component they made, called bottom-sheet.

Added/Edited:

You can use the component to hold the minimization, then:

  • eventually disable the close functionality.
  • place it on the side or switch to an horizontal layout
  • then you can add a modifier class on top of it

Example:

.mat-bottom-sheet-container--horizontal .mat-nav-list { 
  display: flex
}

.mat-bottom-sheet-container--horizontal .mat-list-item {
  height: 45px;
  background-color: rgba(0,0,0,0.1);
  margin: 0 12px;
  padding: 0 12px;
}

Obviously you need to implement also buttons to close/remove them.

0
votes

I tried doing the same thing, but nothing actually worked out. Ended up creating this library that does the same thing. Min-Max-Popup