Photo by John Bakator on Unsplash
NgRx Effects
Effects are a powerful model for handling side effects in your application. Commonly thi...
For further actions, you may consider blocking this person and/or reporting abuse
What about if I need to change the date while the dialog box is open in this concept?
for example, I have a datepicker in a modal window, when it is changed, a request is made and the data needs to be changed to the new ones that came in, how can this be done?
Material dialogs receive data as apart of the config object. The data could be anything so if you use an observable and subscribe to it in the dialog then it would observe the changes made from elsewhere.
This is a great post. Seems like the new ComponentStore may be a good fit for this type of interaction. Use a smaller scoped store to open a dialog? I'm not sure how to make this work since ComponentStore does not support actions. Any thoughts?
Component Store is a great fit for this. Using regular store makes sense if you have global dialogs or snackbars (similar apis). With Component store I would use an effect with no params (when nothing is passes it gets a signal or trigger to act off of) The tricky part would be how you setup the flow of the lifecycle. Do you use multiple effects and model it like that or do you handle the flow in one effect? Something I need to explore but alas haven't had time.
Why can't Angular Material guys implement possibility to change data inside an opened dialog. That would be widely used, i think. For example, I have a list of items in my dialog, and want to have infinite scrolling on them. I can easily get anything from inside dialog with any kind of observables, subjects, signals, but can put data to dialog only at opening.
I implemented something similar sometime ago using ngxs, but i had to run it using ngZone to be able to display the dialogs.
Great article thanks for sharing !
Thank you! I'm not familiar with NGXS but I was wondering what this flow would look like with effects that are found in Component Store
it is not good as it would be. if my dialog component is a dumb(presentation) component it won't work, in dumb component we should not have access to the store,
I always use feature and dumb component as angular architecture. and my dialogs are always dumb component because they just show some data on the screen like fill in a form ... .
Do you have somewhere a working example? Stackblitz or something?
I don't yet but maybe if I get some free time this weekend I'll create one and update the article!
Cool Article! What about reusability? If you need another dialog which triggers another API call when saving... do you have to replicate all the Actions and the Effects?
Great question! Off the top of the head I can think of a way for re usability. You could pass in the Action that you want dispatched that triggers the API call to the payload of the saveDialog action. You would do this in the the openDialog Action. Or you could pass in some key and in the effect read the key and decide what Action to dispatch there. I think I like that one better so your not passing around actual actions although it makes it harder to change in the future. Definitely something to explore and refine