Hello everyone, I'm excited to ask my first question here. Currently, I am working on developing a social network using the MEAN stack and socket.io. One of the challenges I am facing is displaying the number of unread notifications and messages next to the respective icons in real time. While I have successfully implemented the functionality to update the data through sockets and verified that it works in the console, I encountered an issue when navigating away from the page (even if returning to the same URL). Despite receiving updated data in real time, the view stops updating once the route changes.
I've spent countless days trying to resolve this issue by researching and experimenting with various approaches without success. Some of the methods I attempted include:
- Using ChangeDetectionStrategy.OnPush combined with ChangeDetectionRef and its methods like markForCheck and detectChanges with async pipe.
- Attempting to re-render the component on route change without achieving the desired outcome.
- Exploring ngZone, although I found it challenging to grasp its concept completely.
Therefore, I am seeking a concise explanation of the underlying issue and any potential solutions to address it. Although I am aware of similar questions being asked before, I have struggled to apply those solutions effectively in my project. Any assistance would be greatly appreciated.
Below is a snippet of the code for the navbar component:
// Code for the NavbarComponent goes here
This is the template for the navbar component:
// HTML template for the navbar component goes here