Ionic2 beta 11: *NgIf stops working after view change


Hello all,

Like the title says, I’m on beta 11 but I’m not sure if this issue existed before then and I just never noticed.

Anyways, I have a page in my app that loads a podcast and uses a plugin called “ionic-audio” to render the player and whatnot. It works perfectly the first time I open the podcast tab/view: when I hit play, my ngif picks up that the track is or isn’t playing and switches the icon to play/pause.

However if I switch to one of my other views/tabs and then return to the podcast one, the NgIf’s aren’t firing (I tested this by putting a breakpoint in a function called by the an NgIf. In every other case, it constantly gets hit. But after I change views and return, the breakpoint no longer gets triggered thus its not updating). Even the progress bar rendered by the audio plugin doesn’t move (which I’m pretty sure also has to do with NgIf). All the audio plays and pauses when I press the buttons, they’re just not toggling/updating.

The issue exits when running “ionic serve” and emulating ios

Here is a github repo I spun up real quick with the relevant files. Let me know if I’m missing something.

Thanks so much!


Here too!
Did you found any solution? or a way to reload de view on change?


No not really…

I’ve noticed a handful of different scenarios that have this happen. Most recently, I found that after popping an Ionic Toast message on one of my pages, the *ngIfs stopped firing. I removed that toast message and the issue went away. But at the same time I don’t know exactly what about creating that Toast message cause the issue, I only know that removing it solved it. So same goes with my podcast issue in my original post - it could be some little tiny detail about the ionic-audio plugin that stops it but who knows?

I also noticed in my app that if I exited a certain page, minimized the app on iOS (click home button), re-entered the app, switched the tab to/from the origin, then the ngIfs would stop again. Now for that I have ZERO idea what causes that. Again, it could be anything for all I know

As for reloading the view, the only way I could come up with was to call setRoot() on the NavigationController (see link).

So if I’m on my current page and I wanted to reload the view, I call nav.setRoot(CurrentPage); and it reloads the whole view (of course replace “CurrentPage” with the name of the class/page you’re currently on or wanting to reload). That function basically re-sets your page as the root of the navigation. If I remember correctly, it re-runs the constructor of the controller and everything just like you first entered the page.

Again, this isn’t really a fix to the issue I mentioned at all. But for some applications (like where the press of a button doesn’t update something) doing this “reload” can be a decent fallback to get those things firing again.

Hope this helps…


Yeah, same here, but with Loadings. i have 2 pages inside tabs, when i pop a loading on the second, the first stop working correctly. Not just Ifs, but dual binding and cancel buttons on searchbar too!
But when pop a modal on the page everything goes back to normal.

thanks for the help.

Hope they fix it sooner as possible.


I just encountered the same problem, for both the push() and the setRoot() methods. My fix, although kind-of a hack, was to insert some code inside the function. Kind-of like scope.$digest() in Angular 1.

Here’s the documentaton regarding NgZone