Hi , so im currently implementing logic to my angular frontend application . i had event service which is called on start to get array of events from backend and few method in it for example to change status of one of the events( from new to seen) etc. I want to display notifications (for example like in facebook when you had message waiting for you). It have to be dynamic - when user change one of new events status for “seen” information about that should by send in the same moment to notification component and number of waiting notifications should be decrement (without need to reload the page) . How should i implement it ? i was thinking about additional service which will be called whenever user change some event state and then additional service will load data into component but im aware that it will require reload of the page to refresh this notification counter .Heeeeeeeeelp
Angular 11
That’s just classic AJAX (XML HttpRequest aka XHR), right? No reloading of the page, just an update.
So there’s actually at least 2 levels of problems here.
- How to manage client-side state to deal with these notifications
- How to tell the front-end there are even notifications
- How to tell the user when they aren’t on the app they have notifications. This might not be a requirement but worth mentioning, but I wont go into this as you didn’t mention it as a requirement.
How to manage client-side state to deal with these notifications
So your problem essentially boils down to not knowing how to deal with the “state” that is notifications. This sort of problem that is very common with single page applications like those built with Angular, or React. Where the problem is how do you manage shared state within your application. There are a few solutions to this pattern, and Angular provides some help in regards to solving it, namely by being able to leverage services to act as interfaces to the overall application state. To more off the shelf solutions and entire design patterns to solve this problem, where you get state management solutions like ngrx, and Redux. Both of which have goals of managing state on the front-end.
However, most of these state management solutions are rather “heavy” and are not well suited for simpler apps with simple requirements and simple state. In those scenarios a more simple approach of just using services to act as your “state” should suffice, however you have to setup your services accordingly, and be able to update/interact with those services to update the state, rather than keeping state isolated in random places and components.
I wont go into the specifics now of how to use those frameworks, or how to build your own solution by yourself, as the frameworks themselves describe a clear consistent pattern for how to handle such problems, even if you don’t use the frame work itself, so I’d look into them at least as a starting point.
How to tell the front-end there are even notifications
You don’t directly mention this problem, but it might be something you notice you need. Namely if your in the app, and something happens, you should get a notification within the application right? This is the problem I think you mentioned solving by “reloading the page”. However, the better way is to use something like websockets/socket.io to more or less get the state from the back-end when it changes, rather than always having the front-end go get the back-end state. This is how most sites work, where the server tells the client something has changed.
I’d look into those two technologies and adding them to your stack, if this use-case is important to you.
Finally, I brought up getting notifications when the front-end isn’t even involved, like desktop notifications, email, and or mobile. All of these problems require solutions more or less beyond the front-end, but they are worth keeping in mind.
Good luck, keep building, keep learning 
websockets are what i was looking for , ty !
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.