Angular 2 Interpolation {{var}} not updating unless forced

Ionic Framework ionic-v3
1

I have a simple view:

<ion-item>
	<ion-icon name="walk" style="color:blue" item-left></ion-icon>
	<p class="list-entry" item-right>{{steps}}</p>
        <p class="list-title">Steps</p>
</ion-item>

The page updates this.steps every time it receives a new step count from the service:

this.events.subscribe('steps', (data) => {
        this.steps = data;                                                         
});

However, in testing this page, it will only update the steps when I click another component. So even if they are arriving at a constant rate, I will have to click the sidemenu or a button to refresh the step count. How can I fix this?

Edit: It also happens with <p class="list-entry" item-right [innerHTML]="steps"></p>

2

Could you try to put together a small demo? kind of hard to debug this kind of thing without seeing the code and how everything works.

3

I ended up using NgZone, following this post, which worked!