NgRx Counter with Angular Material Snackbar
This application is inspired by this article and derivative of this repo.
- Angular
- Angular CLI version 16.2.5.
- Angular Material
- NgRx
- There are few (current) examples of ngrx effects with an Angular Material SnackBar.
- The original repo used ngx toastr and a ngrx global store.
- There are no actions in a component store so I am unsure how I would convert this to use a component store instead.
- There was some duplication in effects to take advantage of toastr's different snackbar types.
- To emulate different snackbar types in Angular Material, you can pass different components to snackBar.openFromComponent() or use panelClass.
- I think each different snackbar would require a matching effect. Right now, the project has just one effect for the snackbar.
- I converted to use action groups versus separate actions.
- I created a new branch and used the angular cli to convert the project from modules to standalone components.
- When converting from modules to standalones, it is best to run
ng generate @angular/core:standaloneon a new branch and start from top to bottom, running the project after each step of the conversion.
- Vary the snackbar look for different actions
- Medium - how to manage your notifications in angular ngrx inside effects as side actions
- Github - angular ngrx material snackbar
- Github - angular ngrx ngx toastr
- Stack Blitz - angular ngrx ngx toastr
- Blog - ngrx mat snackbar
- YouTube - NGRX/Effects - Display snack bar material UI Notifications | Dispatch multiple actions from effects
- Dev.to - ngrx standalone apis
- Stack Blitz - angular ngrx component store
- Medium - component store 101 main concepts and ngrx store interactions
- Stack Blitz - angular material consecutive snackbars
- Blog - start using ngrx effects for this
- This is Angular - ngrx essentials course
- Angular Docs - standalone migration
- Medium = add custom css to material snackbar