CODEWITHSUNDEEP
angularangular-materialangular9
Sujeet Jaiswara
Sujeet Jaiswara

Reputation: 95

How to create custom animation in angular material dialog?

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

Upvotes: 6

Views: 18677

Answers (2)

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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']});

Upvotes: 8

Minal Shah
Minal Shah

Reputation: 1486

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}`);
});
}
}

Upvotes: 5

Related Questions