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, ExtractorDetails],
directives: [Grid]
})
export class ExtractorQueueGrid {
@ViewChild("childContainer", { read: ViewContainerRef }) childContainer:
ViewContainerRef;
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");
}
}
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
