1

I want to create a second mat-dialog upon existing mat-dialog on the click of a button on the first mat dialog.

Although the second mat-dialog is opening up, it makes the second one to disappear.

Is there a way I can keep the first mat-dialog?

Function to Create the first dialog:

onAddNewTask() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    const dialogRef = this.dialog.open(NewTaskComponent, dialogConfig);

    this.usersDataService.setNewTaskComponentRef(dialogRef);

    dialogRef.afterClosed().subscribe(result => {
      console.log("Result of new task form",result);
    });
  }

The NewTaskComponent has a button to create the second dialog.

 <div>
      <button class="add-task-form-button" mat-stroked-button (click)="addItems()">Add</button>
      <button class="add-task-form-button" mat-stroked-button (click)="removeItems()">Remove All</button>
      </div>

Function to create the second dialog:

addItems() {

const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

const addItemdialogRef = this.dialog.open(AddItemComponent, {
  height: 'auto',
  width: '800px',
});

this.usersDataService.setAddItemComponentRef(addItemdialogRef);

addItemdialogRef.afterClosed().subscribe(result => {
  console.log("Result of add item close", result);
});

}

Prashant Sahu
  • 29
  • 2
  • 6

0 Answers0