Ionic-framework: ionViewDidLoad() not working in Modal

[dhndeveloper]

Note: If you are having problems formatting your issue please refer to this article on using markdown in Github:

https://guides.github.com/features/mastering-markdown/

Note: for support questions, please use one of these channels:

https://forum.ionicframework.com/
http://ionicworldwide.herokuapp.com/

Short description of the problem:

ionViewDidLoad() not executing in Modal

What behavior are you expecting?

I'm expecting a log from the Push Page 'Hello Push Page'

Steps to reproduce:

1. Generated a blank app
2. Modified home page to:

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

import { NavController, ModalController } from 'ionic-angular';

import { Push } from '../push/push';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, public modalCtrl: ModalController) {

let createModal = this.modalCtrl.create(Push);

createModal.onDidDismiss( data => {

});

createModal.present(createModal);

  }

}

1. Push Page:

`
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

/*
  Generated class for the Push page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-push',
  templateUrl: 'push.html'
})
export class Push {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {
    console.log('Hello Push Page');
  }

}

`

insert any relevant code between the above and below backticks

Other information: (e.g. stacktraces, related issues, suggestions how to fix, stackoverflow links, forum links, etc)

Which Ionic Version? 1.x or 2.x

Ionic Framework Version: 2.0.0-rc.0

Plunker that shows an example of your issue

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.9.0
ios-sim version: Not installed
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

[comfortme]

same issue here.

[fastf0rward]

+1

[perdjurner]

I have the same problem.

As a work-around until this is fixed I put my setup logic for the modal in the constructor instead.

[baltazaroliveira]

+1

[jgw96]

Hello all, i am going to close this issue as a duplicate of https://github.com/driftyco/ionic/issues/8449. Thanks for using Ionic!

[aggiustino]

+1

[manucorporat]

@jgw96 I don't think it is the same issue. this issue is about ionViewDidLoad not being called at all.

[mattroth]

Here is my work around:

_Function to Create Modal_

addFamilyMemberTapped() {
    let data = {initFormHack: true};
    let modal = this.modalCtrl.create(Profile, data);
    modal.onDidDismiss(data => {
      if (data.activeMember) {
        console.log("modal dismissed...");
      }
    });

    modal.present();
  }

_Page Loaded in Modal_

  constructor(private navParams: NavParams) {
    /**
     * HACK FOR BUG: https://github.com/driftyco/ionic/issues/8414
     */
    if (navParams.data['initFormHack']) {
      this.ionViewDidLoad();
    }
  }

[dhndeveloper]

@mattroth that work around didn't work for me.... I need to access nativeElement from a @ViewChild so my guess is that the elements are loaded yet when the constructor is fired

Example:

@ViewChild('autocompleteStart') autoCompleteStart;
@ViewChild('autocompleteEnd') autoCompleteEnd;

ionViewDidLoad(): void {
this.autocomplete.loadAutoCompleteScript(this.autoCompleteStart.nativeElement, this.autoCompleteEnd.nativeElement);
}

I'm using the Autocomplete Google API.

Actually just figured out this workaround:

<div (click)="ionViewDidLoad()" class="autocomplete">
  <ion-label primary stacked> Address? </ion-label>
  <input #autocomplete class="autocompleteInput" type="text" placeholder="100 Earth Circle" [(ngModel)]="address" />
</div>

[baltazaroliveira]

My "workaround" is simple! :-) i have create a function and insert inside the constructor. Problem Solved!
When this issue is resolved i change the name of function to ionViewDidLoad.

[BlackFoks]

I found that ionViewDidEnter works in modals so I added a workaround on top of it:

  ionViewLoaded = false;
  ionViewDidEnter() {
    if (!this.ionViewLoaded) {
      this.ionViewLoaded = true;
      this.ionViewDidLoad();
    }
  }

Hope this will help someone.