Ionic-framework: ionViewDidLoad fires before childs components have been loaded

[ecureuill]

Short description of the problem:

ionViewDidLoad fires before childs components have been loaded.

What behavior are you expecting?

ionViewDidLoad fires after childs components have been loaded, so I can access it's properties that are loaded in ngOnInit

Steps to reproduce:

1. 
   
   
   2.
   
3.

    export class DynamicForm implements OnInit {
       @ViewChild(DynamicForm) dform: DynamicForm

    ngAfterViewInit() {
        console.debug("[HomePage]: ngAfterViewInit");
        console.debug("\t this.dform", this.dform)
        console.debug("\t this.dform.form", this.dform.form)
        console.debug("#####################");
    }

    ionViewDidLoad() {
        console.debug("[HomePage]: ionViewDidLoad");
        console.debug("\t this.dform",this.dform)
        console.debug("\t this.dform.form", this.dform.form)    
        console.debug("#####################");
      }
    }

    export class DynamicForm implements OnInit {
         public form: FormGroup;

    ionViewLoaded() {
        //do not fire

        console.debug("[DynamicForm]: ionViewLoaded")
        this.form = this.qcs.toFormGroup(this.groups_questions);
        console.debug("\t", this.form);
        console.debug("#####################");

    }

    ngOnInit() {
        console.debug("[DynamicForm]: ngOnInit")
        this.form = this.qcs.toFormGroup(this.groups_questions);
        console.debug("\t", this.form);
        console.debug("#####################");

    }
    }

console output

    [HomePage]: ionViewDidLoad
        this.dform DynamicForm {qcs: QuestionControlService, groups_questions: Array[0], submitEvent: EventEmitter, cancelEvent: EventEmitter}
        this.dform.form undefined
    #####################
    [DynamicForm]: ngOnInit
        FormGroup {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onDisabledChange: Array[0]…}
    #####################
    [HomePage]: ngAfterViewInit
        this.dform DynamicForm {qcs: QuestionControlService, groups_questions: Array[5], submitEvent: EventEmitter, cancelEvent: EventEmitter, form: FormGroup}
        this.dform.form FormGroup {validator: null, asyncValidator: null, _pristine: true, _touched: false, _onDisabledChange: Array[0]…}
    #####################

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

Which Ionic Version? 1.x or 2.x
2 RC.0

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

Your system information:

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
OS: Distributor ID: Debian Description: Debian GNU/Linux 8.6 (jessie) 
Node Version: v4.5.0

[jgw96]

Note to team: I can easily reproduce this in a starter using the above example of trying to access an element directly in ionViewDidLoad.

[dhndeveloper]

+1

[aurbina83]

So after messing about, it looks like if I set a timeout on anything in the ionViewDidLoad method, the time between where I get a white screen and where I get my content is between 30 and 40ms.

[royipressburger]

@manucorporat Is this just me or this breaks everything?
I use ionViewDidLoad to load all the the items that are being render in the page..
And after I have updated to rc2 everything breaks.

For example

class SomePage {
     items;
    ionViewDidLoad() {
        this.items = [];
    }
}

This thing worked in rc1 and now im getting create read property length of undefined
I guess that angular is trying to draw the page before i initialize the array.

If this is the case where should I put that logic? in the constructor?

[manucorporat]

I need to rewrite some of the documentation but now the lifecycle events make a lot more sense than before:

ionViewDidLoad, means that everything has been already loaded! including children.
so if you template uses items and it undefined, it will print create read property length of undefined.

You can use two solutions:

1. Use the new ionViewWillLoad (sorry about that, we are working right now to write more docs):

    ionViewWillLoad() {
        this.items = [];
    }

or you could just do:

class SomePage {
     items = [];
    ionViewDidLoad() {
        // populate items with more items
    }
}

^ I think the second approach is the one I would choose.