如何在不刷新的情况下更新 angular 页面？

Question

I am using Angular 7 and there is main page.

The main page has lots of buttons and the button has progress bar like this:

Once working with the component and the component is closed, the button's progress bar should update.

In here, MatDialog is working well for the update function.

However, the new tab one doesn't update.

The other code is exactly same except the closing function.

MatDialog(Working):

dialogRef.afterClosed().subscribe((result) => {         
            this.updateProgress(...).catch((error) => { console.log(error); });
}); 

New Tab(Not Working):

windowRef.addEventListener('beforeunload', () => {
            this.updateProgress(...).catch((error) => { console.log(error); });                
});

I found the button's progress bar is update when I click on the other button. I think any event happened after closing new tab.

In this case how can I make event for main page without refreshing whole page?

Please give me some advise.

I appreciate you in advance and sorry for bad explanation.

Answer 1

You could consider implementing a pub/sub for your app. This will allow you to push events to all active clients and let them know they need to pull an update from the server.

Here is a link to a popular client: https://socket.io