How to insert dynamically created component into the template

Question

I have dynamic created component using ComponentFactoryResolver. I want to insert this into template. I tried to use templateRef or viewContainerRef but not of them worked out.

ComponentOutlet expects component class not instance, ViewContainerRef expects template ref. None of them work with created instance.

How can make it work with created component instance ? Is there any way to do it ?

SOLUTION

I solved my problem using insert method of ViewContainerRef

Answer 1

You need a reference to a view container:

export class ExampleComponent implements AfterViewInit {
@ViewChild('contentElement', { read: ViewContainerRef }) contentElement: ViewContainerRef;
    
    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private ref: ChangeDetectorRef
    ) {}
    
    ngAfterViewInit() {
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
                yourComponent
            );

            const contentElement = this.contentElement;
            contentElement.clear();
            const component = contentElement.createComponent(componentFactory);
            this.ref.detectChanges();
        }
    }

<ng-template #contentElement></ng-template>