Creating an angular2 component with ng-content dynamically

Viewed 15163

I would like to set the body of <ng-content> while instantiating a component dynamically using ComponentFactoryResolver.

I see that I can get access to input & output using ComponentRef, but not a way to set <ng-content>.

Please note <ng-content> I'm planning on setting can contain simple text/can span dynamically created components

@Component({
    selector: 'app-component-to-project',
    template: `<ng-content></ng-content>`
})
export class ComponentToProject implements AfterContentInit {

    ngAfterContentInit() {
        // We will do something important with content here
    }

}


@Directive({
    selector: 'appProjectionMarker'
})
export class ProjectionMarkerDirective implements OnInit {

    constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngOnInit() {
        const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject);
        const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory);
        // Question: How to set content before the child's afterContentInit is invoked
    }

}

@Component({
    selector: 'appTestComponent',
    template: `<div appProjectionMarker></div>`
})
export class TestComponent {}
1 Answers
Related