Dynamically inserted value from google api into object not showing up in view

Question

I am using google matrix api to get distance and duration in my ionic 2 application.Problem which i am facing is that ,since the google api take some time to load i am able to insert values from google api to javascript array object only after the page is rendered

values are getting inserted into array object but not showing up in view
if i interact with UI lets just say press a button or a drop down then inserted values from google api appears

please suggest what might be correct way to tackle this problem ,any help is greatly appreciated

It could be related to Angular's `Change Detector` see this answer: http://stackoverflow.com/questions/36919399/angular-2-view-not-updating-after-model-changes/36919459#36919459 — naomi, May 17 '17 at 04:06
thanks @naomi you are right , zone.run() method resolved it for me. — Abhijeet, May 17 '17 at 06:16
@naomi would you like to add that as an answer so we can close this question? — sebaferreras, May 17 '17 at 06:45
sure @naomi, accepted your answer but already had figured it out by myself few minutes before your comment anyways thanks for the link ,appreciate it:) — Abhijeet, May 17 '17 at 07:32

score 1 · Accepted Answer · edited May 23 '17 at 11:47

Usually when the view is not updated with data changes, it means something broke out of Angular's zone.

When your code runs outside of the Angular zone, the Change Detector could not detect the changes, and the view will not update.

To force change detection - you should explicitly run your code inside the Angular zone using the zone.run() method (docs).

See this answer for more options how to force change detection.

Dynamically inserted value from google api into object not showing up in view

1 Answers1