CODEWITHSUNDEEP
javascriptangulargolden-layout
Rajee
Rajee

Reputation: 282

Golden Layout + Angular2 RC5 - Unable to use ViewContainerRef to dynamically create component

I am trying to dynamically create the component to register in Golden Layout. Eg,

    @ViewChild('placeholder', { read: ViewContainerRef }) viewContainerRef;

ngAfterViewInit(){
    this.myLayout.registerComponent('testComponent', (container, componentState) => {
        //Create an empty div on the container

        container.getElement().html("<div #placeholder></div>");
        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(TestComponent);
        this.cmpRef = this.viewContainerRef.createComponent(this.componentFactory);
        this.cmpRef.changeDetectorRef.detectChanges();
        GlDirective.componentCount++;
    });
    }

However , because viewContainerRef is referring to ViewChild that only gets created now , it is always undefined. How can we create a component in RC5 that uses dynamically added div like the one above. I used @Günter Zöchbauer 's answer on Angular 2 dynamic tabs with user-click chosen components to derive to this. However unsure on how this can be achieved with Golden Layout which needs the DOM to be generated on the fly. Please help.

Upvotes: 3

Views: 748

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657406

This is not supported.

Something like #placeholder in 

container.getElement().html("<div #placeholder></div>");

will just be added to the browser and not recognized or processed in any way by Angular2 (except sanitization for security purposes).

A template variable can only be created by adding it statically to a components template.

Upvotes: 1

Related Questions