How to wait for an API call using subscribe to finish in ngOnInit? - node.js

Question

Actual Log order:
('ngOnInit started')
('after me aaya', this.policydetails)
('Here', Object.keys(this.policy).length)
Expected Log order:
('ngOnInit started')
('Here', Object.keys(this.policy).length)
('after me aaya', this.policydetails)
Component.ts file snippet below:
ngOnInit() {
console.log('ngOnInit started');
this.route.params.subscribe(params => {
this.getPoliciesService.getPolicyDetails(params.policyNo)
.subscribe((data: PoliciesResponse) => {
this.policy = data.data[0];
this.flattenPolicy();
console.log('Here', Object.keys(this.policy).length);
});
});
this.makePolicyTable();
}
ngAfterViewInit() {
console.log('after me aaya', this.policydetails);
const table = this.policydetails.nativeElement;
table.innerHTML = '';
console.log(table);
console.log(this.table);
table.appendChild(this.table);
console.log(table);
}
Service.ts file snippet below:
getPolicyDetails(policyNo) {
const serviceURL = 'http://localhost:7001/getPolicyDetails';
console.log('getPolicyDetails service called, policyNo:', policyNo);
const params = new HttpParams()
.set('policyNo', policyNo);
console.log(params);
return this.http.get<PoliciesResponse>(serviceURL, {params} );
}
JS file snippet corresponding to the API call below:
router.get('/getPolicyDetails', async function(req, res) {
let policyNo = (req.param.policyNo) || req.query.policyNo;
console.log('policyNo', typeof policyNo);
await helper.getPolicyDetails({'policyNo' : policyNo},
function(err, data) {
console.log(err, data)
if (err) {
return res.send({status : false, msg : data});
}
return res.send({status : true, data : data});
});
});
Can anyone please suggest where exactly do i need to async-await for expected log order?

Answer 1

If you want this.makePolicyTable() to be called only after the web request (getPolicyDetails) completes, then you should place that call inside of the .subscribe() block:
ngOnInit() {
console.log('ngOnInit started');
this.route.params.subscribe(params => {
this.getPoliciesService.getPolicyDetails(params.policyNo)
.subscribe((data: PoliciesResponse) => {
this.policy = data.data[0];
this.flattenPolicy();
console.log('Here', Object.keys(this.policy).length);
this.makePolicyTable();
});
});
}
You'll probably also want to move the table logic that's in ngAfterViewInit() inside the subscribe() block, too.
Basically, any logic that needs to wait for the asynchronous call to complete should be triggered inside the .subscribe() block. Otherwise, as you're seeing, it can be run before the web request gets back.
Finally, I would move this web service call into ngAfterViewInit() instead of ngOnInit(). Then you can be sure that the Angular components and views are all set up for you to manipulate them when the web service call completes.

Answer 2

You could also set a flag variable to false in the component and then when async calls finishes set it to true and render the HTML based on that flag variable with *ngIf syntax.