ngrx: awaiting of confirm or cancel in a custom dialog
I would say that the dialog doesn't have anything to do with state management.Not everything has to get handled by an effect.
In the case of using angular material I would use the dialog service directly in your ListComponent
to display the dialog, and then wait for either the confirm or cancel.
const dialogRef = this.dialog.open(RemoveProjectDialogComponent, { data: project }); dialogRef.afterClosed().subscribe(async result => { // if result is set, it means the user clicked confirm if (result) { await this.projectService.remove(this.project.id); this.snackBar.open('Project removed'); this.router.navigate(['/']); } });
The way I usually do that is by creating a deleteItemConfirm
and deleteItemCancel
actions. Instead of dispatching the deleteItem
like initially, I dispatch the deleteItemConfirm
and open a confirmation dialog and listen to the answer:
deleteItemConfirm$ = createEffect(() => this.actions$.pipe( ofType(ItemsListActions.deleteItemConfirm), map((action) => confirm('Are you sure?') ? ItemsListActions.deleteItem({id: action.id}) : ItemsListActions.deleteItemCancel()),));
You can easily replace the confirm dialog above with a Material Dialog and subscribe to it.