# changeDetection on Page? **URL:** \ **Category:** ionic-v3\ **Created:** [March 22, 2016, 9:38pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216 "2016-03-22T21:38:50Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![jasonwaters](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jasonwaters/32/96926_2.png) [@jasonwaters](https://forum.ionicframework.com/u/jasonwaters)\ **Post date:** [March 22, 2016, 9:38pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/1 "2016-03-22T21:38:50Z")
I’ve got a page that binds to a class variable for content. But I’m noticing the page sometimes does not update when the variable changes. Can anyone shed some light on ionic 2’s change detection strategy? ---
**Author:** ![jasonwaters](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jasonwaters/32/96926_2.png) [@jasonwaters](https://forum.ionicframework.com/u/jasonwaters)\ **Post date:** [March 22, 2016, 9:41pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/2 "2016-03-22T21:41:04Z")
Also, is there a recommended way to use @Input() annotations on a @Page? Or are they irrelevent? ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [March 22, 2016, 10:34pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/3 "2016-03-22T22:34:02Z")
> [@jasonwaters](#): > > Can anyone shed some light on ionic 2’s change detection strategy? One thing I’ve run into with Angular2 in general is that it inserts some voodoo into Promises that you create in your code that makes them magically work with change detection. Promises that come from external sources don’t get this treatment, and can end up not being reflected properly. A workaround that has worked for me is to wrap such things inside `Promise.resolve()` in order to have them be enchanted. ---
**Author:** ![jasonwaters](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jasonwaters/32/96926_2.png) [@jasonwaters](https://forum.ionicframework.com/u/jasonwaters)\ **Post date:** [March 23, 2016, 5:00pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/4 "2016-03-23T17:00:07Z")
Thanks for the suggestion. I hesitate to do this because I’m using observables exclusively in my app, and wrapping with a promise feels like a hack. I’m sure I just don’t understand the Change Detection Strategy of Angular 2 as well as I should. ---
**Author:** ![spencerJS](https://avatars.discourse-cdn.com/v4/letter/s/5daacb/32.png) [@spencerJS](https://forum.ionicframework.com/u/spencerJS)\ **Post date:** [March 23, 2016, 5:26pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/5 "2016-03-23T17:26:47Z")
Im having trouble with changedetection in the Ionic framework as well - I can get it to work fine in the browser, but when it comes to the emulator or the actual device - the UI won’t update in real time. I’ve noticed its only when I click a button to change UI states that the data updates… ---
**Author:** ![infoproducts](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/infoproducts/32/100372_2.png) [@infoproducts](https://forum.ionicframework.com/u/infoproducts)\ **Post date:** [June 23, 2016, 12:13am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/6 "2016-06-23T00:13:44Z")
Did you ever find a solution or explaination? I suddenly experience this as well, however only in Android 4.4 device (Works in iOS device and desktop safari + chrome) ---
**Author:** ![sstakoff](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sstakoff](https://forum.ionicframework.com/u/sstakoff)\ **Post date:** [August 3, 2016, 6:30pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/7 "2016-08-03T18:30:28Z")
I am having the same issue. To solve, I end up doing a ref.detectChanges() in the @Component which feels entirely wrong. Specifics: angular 2.0.0-rc.4 ionic-angular 2.0.0-beta.10 Having issue on ios device when subscribing to an Observable. Interestingly, I call next() on the Observable in 2 cases: 1. On return of a read from LocalStorage — this works as intended. 2. In response to a Push Notification receipt using phonegap-plugin-push . In this case, I can confirm (via console logging) that the @Component does get the update and it does update the model. BUT - the screen is not updated unless I force with detectChanges() or interact (e.g. gesture) on the UI itself ---
**Author:** ![infoproducts](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/infoproducts/32/100372_2.png) [@infoproducts](https://forum.ionicframework.com/u/infoproducts)\ **Post date:** [August 3, 2016, 11:33pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/8 "2016-08-03T23:33:32Z")
My issues ser caused by a Cordova plugin that provides its own promise polyfill causing change detection to break. Are you using Cordova-plugin-inapppurchase by any chance? > ---
**Author:** ![sstakoff](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sstakoff](https://forum.ionicframework.com/u/sstakoff)\ **Post date:** [August 4, 2016, 1:08am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/9 "2016-08-04T01:08:41Z")
No - I am not using inapppurchase. Pretty strange behavior. I am still stumped ---
**Author:** ![infoproducts](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/infoproducts/32/100372_2.png) [@infoproducts](https://forum.ionicframework.com/u/infoproducts)\ **Post date:** [August 4, 2016, 1:51am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/10 "2016-08-04T01:51:15Z")
Are you using ionic native with the plugin? If not, you should give it a shot ---
**Author:** ![sstakoff](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@sstakoff](https://forum.ionicframework.com/u/sstakoff)\ **Post date:** [August 4, 2016, 3:11pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/11 "2016-08-04T15:11:42Z")
I am using ionic-native, yes. Perhaps I should try bypassing that?? ---
**Author:** ![dac09](https://avatars.discourse-cdn.com/v4/letter/d/d07c76/32.png) [@dac09](https://forum.ionicframework.com/u/dac09)\ **Post date:** [October 21, 2016, 2:40pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/12 "2016-10-21T14:40:12Z")
I’ve run into this exact same issue, using a custom plugin. The data / state is definitely updated, any console.logs are logged, however the UI does not change. In some cases running `applicationRef.tick()` within the component does help, but in other situations it doesn’t at all. I’ve found that wrapping `applicationRef.tick()` in a long setTimeout works e.g. 1s, so does interacting with the UI e.g. launching the keyboard by pressing an input. Has anyone found a solution for this? Works perfectly fine in the browser. **Update** Attempted solutions that didn’t work: 1. `Promise.resolve(true)` in the finally block of an observable 2. `setTimeout(doStuff, 0)` 3. `setTimeout( () => {applicationRef.tick()}, 0}` after updated the state 4. Using `Object.assign` like in redux to create an new object, to facilitate change detection It would seem its a race condition that develops when calling a cordova plugin. Any help would be greatly appreciated. ---
**Author:** ![dac09](https://avatars.discourse-cdn.com/v4/letter/d/d07c76/32.png) [@dac09](https://forum.ionicframework.com/u/dac09)\ **Post date:** [October 25, 2016, 10:57am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/13 "2016-10-25T10:57:20Z")
Just an update if it helps anyone in the future. **TLDR;** Wrap plugin function in a promise to make Angular2 know about external callbacks. **Full description** The problem would only surface on iOS, and originally this is how I was invoking the plugin function: `Observable.bindCallback(cordova.plugins.myPlugin.doSomething)` although this works on the browser and Android, for some reason it prevents rerendering of the UI by Angular2. This is _probably_ due to the Observable not using the patched Promise i.e. zoneAwarePromise. The way around this was to do the following: ```auto // Wrap the callback function in a Promise function doSomethingAsPromise(...args) { return new Promise( (resolve, reject) => { cordova.plugins.myPlugin.doSomething(resolve, reject, ...args); }) } // Now make an Observable out of the Promise Observable.fromPromise(doSomethingAsPromise()) ``` This is in essence what ionic-native does from my sniffing their source on github. I hope this helps someone if you’re struggling with the same problem! ---
**Author:** ![mumairofficial](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mumairofficial/32/106015_2.png) [@mumairofficial](https://forum.ionicframework.com/u/mumairofficial)\ **Post date:** [May 26, 2017, 1:54pm UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/14 "2017-05-26T13:54:33Z")
I have fixed by using [`ChangeDetectorRef`](https://angular.io/docs/ts/latest/api/core/index/ChangeDetectorRef-class.html) from angular core library; following example my help: ```auto import { ChangeDetectorRef } from "@angular/core"; class MyClass { public myVal: any; constructor(private changeDetectorRef: ChangeDetectorRef) { this.myVal = "initial value"; this.updates(); } private update() { setTimeout({ this.myVal = "New Value"; this.changeDetectorRef.detectChanges(); }, 3000); } } ``` Note: above example works well for **Ionic 3.2.0** and **Angular 4.1.0** ---
**Author:** ![myfitstatus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/myfitstatus/32/115338_2.png) [@myfitstatus](https://forum.ionicframework.com/u/myfitstatus)\ **Post date:** [September 13, 2017, 4:58am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/15 "2017-09-13T04:58:46Z")
> [@mumairofficial](#): > > setTimeout({ > this.myVal = “New Value”; > this.changeDetectorRef.detectChanges(); > }, 3000); This solution ended my head scratching frustration. Many thanks!! Mine needed a quicker response so I set the timeout value very small but works like a charm now. ---
**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\ **Post date:** [September 13, 2017, 5:18am UTC](https://forum.ionicframework.com/t/changedetection-on-page/47216/16 "2017-09-13T05:18:52Z")
Manual triggering of change detection is only needed in relatively rare circumstances, and `setTimeout()` is in my experience a recipe for disaster, because it is a petri dish for unreproducible results. I would strongly urge anybody considering the advice referenced in the previous post to seek more robust alternatives.