3

I am showing mat-dialog with 600px height and width.

I have a button in mat-dialog. When I click on button, I want to show the left sliding div from the left side of mat-dialog without effecting mat-dialog.

How can I do this?

Chatra
  • 2,989
  • 7
  • 40
  • 73

1 Answers1

6

You can do this in two ways.

Using angular Animations

Stackblitz: https://stackblitz.com/edit/angular-azjfgh

Angular provides a sets of methods to do some cool stuff. In this example I've wrote that:

animations: [
        trigger('widthGrow', [
            state('closed', style({
                width: 0,
            })),
            state('open', style({
                width: 400
            })),
            transition('* => *', animate(150))
        ]),
    ]

trigger -> the name of the trigger we want to registrate and use in the html

state -> two state that we will use in order to change our div.

style -> the css property we want to change based on our logic.

transition -> a simple timer that will animate the grow of the div.

If you open the stackblitz you will see how does it work.I used another div to trigger a function called changeState to change the property to animate it.

Using just css

Stackblitz: https://stackblitz.com/edit/angular-lpjqnd

Using transition (native from css) and ngClass you can achieve the same thing.

Since it's just basic code I'm just putting here the css class: 

.left-stuff {
  height: 50px;
  border: 1px solid black;
  transition: all 0.2s ease-in-out;
  background-color: red;
}

If you need more help feel free to comment this answer.

Jacopo Sciampi
  • 2,990
  • 1
  • 20
  • 44
  • I tried your first stackblitz and changed the width. For some reason it is behaving weird. Try 50 width and even replace 150 with 50 in animation and try – Chatra Oct 28 '19 at 15:41
  • I tried with this settings: width = 50; changeState(): void { (this.width === 50) ? this.width = 150 : this.width = 50; } and it's working fine. Have I missed something? – Jacopo Sciampi Oct 30 '19 at 07:52