Auto close Angular dialog after x seconds

Question

I have an angular dialog with a welcome message. I would like to auto close this dialog after x amount of seconds (3-5s). Can somebody point me to a solution, article or documentation how to do this?

many thx, Pete

Answer 1

If you are using material dialog MatDialogRef<T> object, which is created by MatDialog service, has close function.

Here's the very simplified example.

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'content',
  template: '<button mat-raised-button (click)="openDialog()">Open dialog</button>',
  styles: [''],
})
export class Content {

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const timeout = 3000;
    const dialogRef = this.dialog.open(Dialog, {
      width: '300px',
      data: {}
    });

    dialogRef.afterOpened().subscribe(_ => {
      setTimeout(() => {
         dialogRef.close();
      }, timeout)
    })
  }
}

@Component({
  selector: 'dialog',
  template: `
<div>
   Dialog
</div>
<div mat-dialog-actions>
  <button mat-button (click)="closeDialog()">Close</button>
</div>`,
})
export class Dialog {

  constructor(
    public dialogRef: MatDialogRef<Dialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

  closeDialog(): void {
    this.dialogRef.close();
  }

}

Answer 2

For Boostrap Modal, you have to firstly get the referrence of the modal by viewchild.

@ViewChild('closeModal') closeModal: ElementRef


@Component({
  ...
})
export class myComponent extends myModal {

  @ViewChild('closeModal') closeModal: ElementRef

  ...

}

When you need to close the modal, just call: this.closeModal.nativeElement.click()

For example:

public googleLogin(content): void {
   this.auth.authenticateUser().then((res: any) => {
      setTimeOut(()=>{
         // close the modal in this moment.
         this.closeModal.nativeElement.click() //<-- here

         const user = res.user;
         this.router.navigate(['/gallery']);
      },8000);
   });
}

In your html, add #closeModal to the button:

<button #closeModal type="button" class="close" aria-label="Close" (click)="d('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

Find out more about bootstrap modal here.

Material Design: you will have to use the material dialog service which you injected into your component.

constructor(
  public dialogRef: MatDialogRef<Dialog>,
  @Inject(MAT_DIALOG_DATA) public data: DialogData
) {}

closeModalDialog(): void {
  this.dialogRef.close();
}

onDialogOpen(): void {
  let dialogRef = this.dialog.open(Dialog);

  setTimeout(() => {
     dialogRef.close();
  }, 80000) ==========> set time here 
}

Find out more about material angular modal here.