I have developed an Angular application where I am fetching data using Angular HttpClient to consume a REST API. The received data consists of values that need to be displayed on a form page. When I make edits to the data and click save, the changes are saved through HttpClient with a PUT call to the REST API.
Being new to Angular, my concern is when I open the same page in two different browsers and make changes in one browser, I want those modifications to be reflected in the other browser as well. How can I achieve this in Angular 8?
The calls to the REST API are handled in a separate service defined as:
getData(): Observable<IData> {
return this.http.get(`${this.serverurl}`);
}
updateData(data: IData): Observable<IData> {
return this.http.put<IData>(`${this.serverurl}/save`, data);
}
The service calls are implemented as follows:
ngOnInit() {
this.myHttpService.getData().subscribe(
data => {
this.myData = Object.assign({}, data);
}
);
}
onSaveClick() {
if (this.myData) {
this.myHttpService.updateData(this.myData).subscribe(
response => {
this.myData = response;
}
);
}
}
What additional steps do I need to take to synchronize data across multiple browsers?