ViewChild inside ModalController component


#1

Nevermind it’s solved I was not inside ngAfterViewInit.
Hello,
I would like to access my a viewChild inside a modal :

import {Component, ViewChild, ViewContainerRef} from '@angular/core';
import {NavParams, ViewController} from "ionic-angular";
import {ComponentLoader} from "../../services/componentLoader";

/**
 * Generated class for the ComponentsRepeatableBlocDetailComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
    selector: 'RepeatableBlocDetailComponent',
    templateUrl: 'components-repeatable-bloc-detail.html'
})
export class RepeatableBlocDetailComponent {
    @ViewChild('RepeatableBlocDetailComponentContainer', {read: ViewContainerRef}) viewContainer: ViewContainerRef;
    elements: any;
    componentLoader;
    viewContainerRef: ViewContainerRef;

    constructor(params: NavParams, public viewCtrl: ViewController) {
        this.elements = params.get('element');
        this.componentLoader = params.get('componentLoader');
        this.buildView();
        debugger;
    }

    dismiss() {
        this.viewCtrl.dismiss();
    }

    buildView() {
        debugger;

        for (var key in this.elements) {
            if (this.elements.hasOwnProperty(key)) {
                this.componentLoader.setRootViewContainerRef(this.viewContainer); // this.viewContainer is undefined
                this.componentLoader.addDynamicComponent(this.elements[key]);
            }

        }

    }

}

inside my modal component it this.viewContainer is undefined so I can’t access my viewChild.

Here is the code to launch my modal :


import {Component, forwardRef, Inject, ViewChild, ViewContainerRef} from '@angular/core';
import {ComponentLoader} from "../../services/componentLoader";
import {ModalController} from "ionic-angular";
import {RepeatableBlocDetailComponent} from "../components-repeatable-bloc-detail/components-repeatable-bloc-detail";


@Component({
    selector: 'RepeatableBloc',
    templateUrl: 'components-repeatable-bloc.html'
})
export class RepeatableBlocComponent {
    @ViewChild('RepeatableBlocComponentContainer', {read: ViewContainerRef}) viewContainer: ViewContainerRef;
    element: any;
    lines_item= [];
    componentLoader;

    constructor(@Inject(forwardRef(() => ComponentLoader)) componentLoader: ComponentLoader,public modalCtrl: ModalController) {

        this.componentLoader = componentLoader;
    }
    
    openItem(element){
        let modal = this.modalCtrl.create(RepeatableBlocDetailComponent, {element:element,componentLoader:this.componentLoader});
        modal.present();
    }
    setElement(element) {
        this.element = element;
        this.buildList();

    }
 


}

any ideas ?


#2

share moar code mate;)


#3

Done I’m not sure if it helps the point is : @viewChild returns undefined inside a modal.


#4

you helped a lot thank you


#5

This is pretty un-helpful for the community. Could you share your solution?