View not updating after API call following login

Hey folks,

I’ve started experimenting with ionic2. I built a simple app, with navigation between pages, several layouts, menu etc. I hooked everything up and used the http module to get data for the views from an API.
I then added a login page as the rootview. After successfully logging in I set my root to my homepage.
The authentication works, so does the app and the API calls. Everything together does not.

I’m using authentication via Facebook. I use the InAppBrowser plugin to achieve this as my API was already set up to do the whole oAuth redirect dance. The API correctly creates a session and sends back a token which I then strip out of the URL and store locally. After that I close the inAppBrowser and set the root page. That page request more data from the API and successfully updates the model, yet the view remain blank.
I tested this without the login page, setting the homepage as root directly and that works, but when I try to use with the login first, it doesn’t update.

Anyone have any ideas on the reason for this?

Try using the async pipe or creating an observable for your request.

Chances are, the data is being returned outside of angular zone change detection.

I’ll try the async pipe, I was already using observables and it didn’t work. I’ve just done a quick test, I refactored the api call to only request data on clicking a button. This way it works, but if call the api on the constructor or any of the onInit funcs, it doesn’t update the view. So yes, most likely a problem with angular zone.

I’ll try async first thing tomorrow morning. Get back to you then

Still no luck with the async pipe, it just doesn’t update the view

You can always import a ChangeDetectorRef and force change detection whenever you want (not the preferred way of doing this but it works)

import {ChangeDetectorRef} from '@angular/core';

  templateUrl: 'page.html'
export class Page{
 constructor(private changeDetectorRef: ChangeDetectorRef) {}
 doAsyc() {
   this.someService.returnsObservable.subscribe(res => { = res;
    }, err => console.error(err));