Angular Http Client Call is not returning value to component but shows response in browser's...

I have a component that renders a map view. The data for the map is fetched from backend service call. I tried to live debug on the browser's dev tools. It gets to the service call and seems to skip the service call. But when I checkout the network traffic the service call returned values and was successful. I think the component is loading before the service call is completed.

this is what the init component looks like

ngOnInit(): void {
this.myService.getData().subscribe(
(result) => {
this.data = result.body;
},
(result: HttpErrorResponse) = {
console.log(result.error);
}
);
this.loadMap();
}


During execution, it gets past the service call and loads the map. 'this.data' appears empty. I tried adding a condition around this.loadMap() to make sure there is data but that just stops the render. The component doesn't seem to wait for the service call to complete. I tried using *ngIf to check for results before component loads and that didn't help. How can I load this.data before the component renders?

Continue reading...