I am using angular material dialog component code and want to add slide right animation on open/close duration.
openDialog() {
this.dialog.open(DialogContentExampleDialog);
}
Thanks
-
check animated.css for this. You can add remove class name to do css effect easilyCagri Tacyildiz– Cagri Tacyildiz2020-06-27 13:32:51 +00:00Commented Jun 27, 2020 at 13:32
-
Any suggestions ? I'm in the same issueTim– Tim2023-10-07 10:18:59 +00:00Commented Oct 7, 2023 at 10:18
Add a comment
|
2 Answers
Demo put this in index.hml
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
call this in component
const dialogRef = this.dialog.open(DialogContentExampleDialog,{panelClass: ['animate__animated','animate__slideInLeft']});
1 Comment
Cyrus
This does not solve the issue fully. Clicking on the backdrop will not execute the animation. Only time this solution works is if the dialog is explicitly closed by clicking on the close icon.
You can use the library called ng-dialog-animation and use the service provided by this called NgDialogAnimationService, to open the dialog instead of the MatDialog.
Your component would have the following line of codes:
import { Component } from "@angular/core";
import { MatDialog } from "@angular/material/dialog";
import { NgDialogAnimationService } from "ng-dialog-animation";
@Component({
selector: "dialog-content-example",
templateUrl: "dialog-content-example.html",
styleUrls: ["dialog-content-example.css"],
})
export class DialogContentExample {
constructor(public dialog: NgDialogAnimationService){}
openDialog() {
const dialogRef = this.dialog.open(DialogContentExampleDialog, {
width: "250px",
// option1
animation:{to:"aside"},})
dialogRef.afterClosed().subscribe(result => {
console.log(`Dialog result: ${result}`);
});
}
}
1 Comment
Sujeet Jaiswara
Thanks @Mina Shah I tried but its not working stackblitz.com/edit/ng-mat-dialog-animation