Search code examples
ionic-frameworkionic2hybrid-mobile-appmodalviewcontrollerapache-cordova

Pause MyApp during modal.present()


Original Post:

I am coding an Ionic 2 Hybrid app and attempting to create a modal that logs into FB and gathers necessary information for the app to run properly.

While the modal is presented (and the user is logging in), I need the app to be paused in the background. In other words, it cannot be continuing with the subsequent processes until the modal is dismissed.

Here is the relevant portion of code as an example:

var user = firebase.auth().currentUser;

if (user) {
  console.log("User is already signed in.");
} else {
  console.log("No user is signed in.");
  let profileModal = this.modalCtrl.create(ProfilePage);
  profileModal.present();
}

console.log("test pause.")

While the modal is still being presented and before it is dismissed, "test pause." is being written to the console. I need it to NOT be written to the console until AFTER the modal is dismissed.

NOTE: I have everything working properly except this bit. I haven't figured out how to accomplish 'pausing' until the modal is dismissed.

Is there any way to do this?


Clarification:

I am presenting the modal in the ngOnInit() of the main app component. I am doing this because I need specific user information to be gathered before the main app component is loaded and any pages are set/added to the stack.

Otherwise, the rootpage will not be built properly.

Here is the updated code in its full context in the app.component.ts file:

import { Component, ViewChild, OnInit } from '@angular/core';
import { ModalController, Nav, Platform } from 'ionic-angular';
import { SettingsService } from './../services/settings';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from './../pages/home/home';
import { SignInPage } from './../pages/signin/signin';
import { CreatePage } from './../pages/create/create';
import { ProfilePage } from './../modals/profile/profile';

import firebase from 'firebase';

@Component({
  templateUrl: 'app.html'
})

export class MyApp implements OnInit {

  @ViewChild(Nav) nav: Nav;
  rootPage: any = HomePage;
  homePage: any = HomePage;
  signInPage: any = SignInPage;
  createPage: any = CreatePage;
  photoURL: string;

  constructor(private modalCtrl: ModalController,
              private platform: Platform, 
              private statusBar: StatusBar, 
              private splashScreen: SplashScreen,
              private settingsService: SettingsService) {
    this.initializeApp();
  }

  ngOnInit() {
    var config = {
      apiKey: "AIzaSyDmTh_LZuMPnn7nJRquoW5xWwgQ4Ia3J9E",
      authDomain: "thevault-ba308.firebaseapp.com",
      databaseURL: "https://thevault-ba308.firebaseio.com",
      projectId: "thevault-ba308",
      storageBucket: "thevault-ba308.appspot.com",
      messagingSenderId: "1024205108979"
    };

    firebase.initializeApp(config);

    var user = firebase.auth().currentUser;

    if (user) {
      console.log("User is already signed in.");
    } 
    else {
      console.log("No user is signed in.");
      let profileModal = this.modalCtrl.create(ProfilePage);
      profileModal.present();
      profileModal.onDidDismiss(() => {
        console.log("test pause.")
        this.photoURL = this.settingsService.getUserPhoto();
        console.log(this.settingsService.getUserName());
      })
    }
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page);
  }

  signOut() {
    firebase.auth().signOut().then((result) => {
      console.log("Sign out success.");
      this.nav.setRoot(SignInPage);
    }).catch((error) => {
      console.log(error.message);
    });
  }

}

Solution

  • I was able to resolve my problem by using *ngIf in the app.html file.

    <ion-content *ngIf="photoURL != null">