In my endeavor to dynamically create a component within another dynamically created component, I am facing a unique challenge.
Below is the code snippet:
export class DefaultLayoutComponent {
constructor(private cdRef: ChangeDetectorRef, public defaultLayoutService: DefaultLayoutService,
private resolver: ComponentFactoryResolver) {
}
@ViewChild("appAsideContainer", { read: ViewContainerRef }) appAsideContainer: ViewContainerRef;
ngOnInit() {
this.defaultLayoutService.e_openAppAside.subscribe(params => {
let appAsideRef;
if (this.appAsideContainer.length == 0) {
const appAsideFactory =
this.resolver.resolveComponentFactory(CustomAppAsideComponent);
appAsideRef = this.appAsideContainer.createComponent(appAsideFactory);
}
let appAsideComponent = <CustomAppAsideComponent>appAsideRef.instance;
//dynamically create comp.
const factory = this.resolver.resolveComponentFactory(params.type);
let component = appAsideComponent.container.createComponent(factory);
//add input values to components
if (params.inputs) {
for (let p in params.inputs) {
component.instance[p] = params.inputs[p];
}
});
}
}
The issue I am encountering is that some members of appAsideComponent cannot be accessed as it seems to not be fully instantiated.
https://i.sstatic.net/nPALf.png
The relevant CustomAppAsideComponent code:
export class CustomAppAsideComponent {
constructor() {
}
@ViewChild("container", { read: ViewContainerRef }) public container: ViewContainerRef;
}
And its associated markup:
<app-aside [fixed]="true" [display]="false">
<ng-template style="border: solid 2px;" #container></ng-template>
</app-aside>
app-aside generates a sidebar that opens vertically to the right.
I can successfully create other components using this method, but hitting a snag with this particular one. Both AppAsideComponent and CustomAppAsideComponent are included in the module's entryComponent
Is there something obvious that I may be overlooking?