CODEWITHSUNDEEP
angularangular-material
yantrab
yantrab

Reputation: 2672

how to close dialog after animation finished?

I wont to do some animation, and close the dialog after that:

                const animation = el.animate([keyFrame0, keyFrame100],
                          { duration: 600, easing: 'ease-out' });
                animation.onfinish = () => ref.close(dialogResult);

the dialog stays open , until second click.

stackblitz demo

Upvotes: 0

Views: 1052

Answers (1)

JuNe
JuNe

Reputation: 1997

You can subscribe the "afterOpened" of the dialog ref and do your animation and closing there.

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: "250px",
      data: { name: this.name, animal: this.animal }
    });
    dialogRef.afterOpened().subscribe(() => {
      const wrapper = document.getElementsByClassName(
        "cdk-global-overlay-wrapper"
      )[0];
      const animation = wrapper.animate([{ left: "0" }, { left: "100%" }], {
        duration: 600,
        easing: "ease-out"
      });
      animation.onfinish = () => {
        dialogRef.close();
        wrapper.style.display = 'none'
      }
    })
  }

If you want to have a timeout before animating, you can you can use the "setTimeout" function.

Upvotes: 1

Related Questions