Angular Snackbar Not Displaying After onAction Execution

I'm working with Angular's Material Snackbar (MatSnackBar) to display notifications in my application. In my implementation, when a user performs an action and clicks the snackbar's action button (onAction), it should trigger another snackbar to show.

However, while debugging, I noticed that the code inside the onAction subscription executes correctly, including calling the showFinalSnackBar() method. Despite this, the second snackbar does not appear on the screen.

Here’s a simplified version of my code:

'''if(validPhotosIds.length > 0) { ..... (some code here) } else { const snackBarRef = await this.snackBar.show({ message: "itemUpdated", actionMessage: "undo", }) snackBarRef.onAction().subscribe(() => { this.showFinalSnackBar() }) this.showFinalSnackBar() this.selectOperationCompletedEmitter.next() } }'''

I have verified that:

1. showFinalSnackBar is being called as expected (confirmed through console logs).
2. No errors appear in the browser console.
3. The snackbar service works fine in other parts of the application.

Continue reading...