TypeError: Cannot read property 'createComponent' of undefined

Question

I am trying to load a component dynamically from a parent component. While loading the child component I need to pass some input parameter as well. But I am getting the following error in the browser console.

Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined
    at resolvePromise (zone.js:538)
    at zone.js:574
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (lib/@angular/core/bundles/core.umd.js:9091)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at drainMicroTaskQueue (zone.js:474)
    at XMLHttpRequest.ZoneTask.invoke (zone.js:426)BrowserDomAdapter.logError @ lib/@angular/platform-browser/bundles/platform-browser.umd.js:1900
zone.js:461 Unhandled Promise rejection: Cannot read property 'createComponent' of undefined ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:461
zone.js:463 Error: Uncaught (in promise): TypeError: Cannot read property 'createComponent' of undefined(…)consoleError @ zone.js:463

My Parent component

import { Component, ViewChild, ViewContainerRef, ComponentResolver, Injector } from '@angular/core';
import { ExtractorDetails } from './ExtractorDetails';

declare var kendo: any;

@Component({
    selector: 'kendo-grid',
    templateUrl: './HTML/Admin/KendoGrid.html',
    providers: [Configuration, Constants ],
    directives: [Grid, ExtractorDetails]
})
export class ExtractorQueueGrid {
     @ViewChild(ExtractorDetails, { read: ViewContainerRef }) childContainer;

    options: any;
    rowObject: any;

    constructor(private configSetttings: Configuration, private constants: Constants, private _injector: Injector, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {
        this.setUpGridOptions();
    }

    onChange(event) {
        console.log("click event called");
        console.log("event " + event);
        event.preventDefault();

        this.rowObject = event.target;

        console.log("Queue ID : " + this.rowObject.parentElement.cells[0].innerText);

        this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
                console.log("Creating component");

                this.childContainer.createComponent(cmpFactory,null, this._injector);
                let cmpRef = this.childContainer.createComponent(cmpFactory);
                cmpRef.instance.ExtractorID = this.rowObject.parentElement.cells[0].innerText; //Input paramter which need to be passed to child component 
            });
    }

}

My child component

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

@Component({
    selector: 'extractordetails',
    templateUrl: './HTML/Admin/ExtractorDetails.html'  
})
export class ExtractorDetails {
    @Input() ExtractorID : any; 

    constructor()
    {
        console.log("ExtractorDetails component is loaded");
    }
}

"./HTML/Admin/KendoGrid.html" File below

<div>
    <k-grid [options]="options" (click)="onChange($event)"></k-grid>
</div>
<div>
    <h3>Loader</h3>
    <div id="extractorqueue-details">Extractor Details loaded here</div>
</div>

Answer 1

var self = this;
this._cr.resolveComponent(ExtractorDetails).then(cmpFactory => {
            console.log("Creating component");

            self.childContainer.createComponent(cmpFactory,null, this._injector);
            let cmpRef = self.childContainer.createComponent(cmpFactory);
            cmpRef.instance.ExtractorID = self.rowObject.parentElement.cells[0].innerText; //Input paramter which need to be passed to child component 
        });
}

Try this. Inside the then callback, this actually refers to the scope that is calling your callback. By using self you can refer to the scope where the callback was defined.