Hello everyone! 🙂
_TLDR: Angular’s change detection somehow doesn’t work on a phone. View updates slowly after random time intervall._
I stumbled upon the weirdest bug ever. It’s only observable when the app is installed on a phone, but not on when serving it using `ionic serve`. (Don’t mind the dirty code later pls.)
I have a variable called `amount: number = 1;`
I have two buttons, a plus and a minus one. Here is their html:
```auto
{{amount}}
```
And here is their corresponding logic:
```auto
changeAmount(increasing: boolean): void{
setTimeout( () => {
increasing ? this.amount ++ : (this.amount > 1 ? this.amount -- : this.amount);
if(this.amount == 1) {
document.getElementById("popover_icon_minus").classList.add("disabledColor");
} else {
document.getElementById("popover_icon_minus").classList.remove("disabledColor");
}
this.hackyResize();
},10)
}
private hackyResize(): void {
// XXX: What the f*ck happens with the view?!
window.dispatchEvent(new Event('resize'));
}
```
As you can see these methods are very unclean. But this is the only way I was able to make it work.
_Expected behaviour:_
As soon as someone clicks a button the number changes according to what he has clicked.
_Observed behaviour (without my dirty functions):_
When someone clicks and changes the amount it takes a random time until the view updates and the number on screen changes. (The disabled class gets applied on the button instantly, therefore I know that the number gets changed instantly when the number is reduced from two to one or increased from one to two. The bug can’t / shouldn’t be in the code’s logic.)
I solved this problem forcing a resize of the screen every time the function is called. But this shouldn’t happen. What’s wrong with Angular’s change detection? Or did I do something wrong?
Thank you for any help!
---
Sorry if I might have been unclear, englisch is not my first language.
I thought it was clear, that the buttons I was referring to, where the columns which had a click method on it 🙂
This one: ``,
And this one: ``.
---
Those aren’t buttons. You would not have this problem if you were using buttons. They are clickable Ionic components. Ionic is built on top of Angular, so its components may or may not be inside the Angular ViewContainer, depending on what you are doing. ion-select and ion-checkbox are not checked by Angular change detection, for example.
You can add the tappable directive, to see if that helps.
``
In general, though, if you want the user to interact with a pure Ionic component, you might have to fire change detection manually.
---
Thank you so much, that clarifies a lot!
I do have a similar problem on the same page, that my checkboxes do not get updated.
How do I fire change detection manually for buttons as well as for checkboxes?
---
You can definitely make divs clickable, they absolutely do not have to be buttons. I can’t reproduce your bug, this works totally fine for me both in chrome and running on my android.
Try here: [https://plnkr.co/edit/rHIksW?p=preview](https://plnkr.co/edit/rHIksW?p=preview)
Notice I don’t have your classes you have so I just put a + and a - inside each column.
If you want to test on mobile, open this on your phone: [https://run.plnkr.co/preview/cjdkcoj2d000bfill8bkbfltw/](https://run.plnkr.co/preview/cjdkcoj2d000bfill8bkbfltw/)
It all works perfectly fine for me. Does it not to you? If tell us what phone model you’re using.
---
> [@rlouie](#):
>
> You can definitely make divs clickable
That’s what I do actually.
`
`
That way the click is on something I know Angular will recognize across platform. I almost never listen for a click inside an Ionic component, just in span or div.
---
Thank you for your answer! I tested on several Android devices actually. The only one where it was instant without my hacky rework was a google pixel 2.
Otherwise on like a Samsung Galaxy S7 for example, or and iPhone 8 it would show the described observed behaviour.
It might have something to do with the stuff wrapped around it.
```auto
{{amount}}
someWord
```
So there is a lot of ionic generated stuff going on. Might disturb the view…
---
Does the code I posted work on your pixel 2? Coincidentally that’s the phone I have and where my code ran just fine.
I’m much more concerned with your code that modifies the class of the grid cells than any of the html, since you’re not really doing that in in the angular way.
But regarding the code you posted there, there is no reason to use multiple grids. Use one grid, put multiple rows in it. Otherwise I don’t really see any issues. The big thing is…does my code work where yours doesn’t?
---
Except button and a, `tappable` is a **must** , it can’t works correctly on real devices without it
I use tappable and click on elements like div, ion-card. ion-item, p, it does the job
---
see here [https://www.joshmorony.com/understanding-zones-and-change-detection-in-ionic-2-angular-2/](https://www.joshmorony.com/understanding-zones-and-change-detection-in-ionic-2-angular-2/)
and my post of the same kind of problem
[Item click event results not propogated, resolved](https://forum.ionicframework.com/t/item-click-event-results-not-propogated-resolved/121157)
---