My component is in need of updating the view following an HTTP call. The scenario involves displaying a record after retrieving data from the server.
In the HTML file, we have-
<mat-spinner *ngIf="loading"></mat-spinner>
<span *ngIf="!loading">This is my record </span> {{record}}
The TypeScript code goes like this-
constructor(private ngZone: NgZone) {}
ngOnInit(){
this.loading = true;
this.callServer():
}
callServer() {
this.service.callServer()
.subscribe(
(data) => {
this.onSuccess(data);
},
(error) => this.onError(error)
);
}
onSuccess(data) {
this.loading = false;
this.record = data;
this.addGoogleMetaTags(this.record);
}
addGoogleMetaTags function is responsible for manipulating meta tags within the document using Angular's Meta service. Due to its time-consuming nature, there is a delay in updating the view after fetching the data. Even after attempting to trigger change detection or calling the Google function outside of Angular, the issue persists.
this.zone.runOutsideAngular(() => this.addGoogleMetaTags(this.record));
Is there a way to instantly reflect the changes in my application without waiting for the completion of addGoogleMetaTags?