CODEWITHSUNDEEP
angularangular-materialangular-material-6
Krishna
Krishna

Reputation: 347

Minimize Angular Material Dialog

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

Upvotes: 2

Views: 7393

Answers (3)

sayeed99
sayeed99

Reputation: 1

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

Upvotes: 0

Anish Kutti
Anish Kutti

Reputation: 354

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)

Upvotes: 1

Giuseppe Leo
Giuseppe Leo

Reputation: 49

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.

Upvotes: 0

Related Questions