PrimeNG Toast not displaying after first API call

Question

Steps:

1. Click save button
2. Data is saved and returns true
3. runs the code this.messageService.add({severity: "success", summary: "Success Message", detail: "Order submitted"});

expected result

-> toast message shows

actual result

-> toast does not show UNTIL i click on the page (anywhere on the page).

Below is what I have tried:

this.test.getdata(this.id).subscribe(res=> {
if(res.id == 0) {
     this.zone.run(() => {
           this.messageService.add({ key: 'custom', severity: 'info', summary: 
           'summery', detail: 'this is test' });
     });
     return;
}
})