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