How to add component html in existing Angular component

Question

I have an app component in my angular application.

@Component({
    selector: my-container',
    template: `<div [innerHTML]="infoComponentHtml"></div>`
})
export class MyContainerComponent implements AfterViewInit {

    @Input() infoComponentHtml: string = "";

    constructor(private componentFactoryResolver: ComponentFactoryResolver){

    }

    ngAfterViewInit(): void {
        if(this.infoComponentHtml){
            ??????
            append this.infoComponentHtml dynamically
        }
        else{
            ??????
            append "<default-content></default-content>" dynamically
        }
    }
}

this.infoComponentHtml format is like this "<component-name></component-name>"

this.infoComponentHtml is third party component that comes from another component. So I do not know the component class name of it.

How can I compile and add append the component?

StepUp · Answer 1 · 2019-09-18T12:24:39.430

0

It is possible to use structural directive *ngIf:

HTML:

<ng-container *ngIf="showInfoComponent; else defaultContent">
    <infoComponent></infoComponent >
</ng-container>    
<ng-template #defaultContent>
    <default-content></default-content>
</ng-template>

UPDATE:

You cannot load components using innerHTML. In order to load components dynamically, you need to set component infoComponentHtml to Type<Component>;

@Input() infoComponentHtml: Type<Component>;

and then use this answer to load component dynamically

edited Sep 18 '19 at 12:24

answered Sep 18 '19 at 08:14

StepUp

36,391
15
88
148

I need it AfterViewInit – barteloma Sep 18 '19 at 08:46
I could not set the `` from string. template parse error occured – barteloma Sep 18 '19 at 11:54
@barteloma do you know the selector name? – StepUp Sep 18 '19 at 12:27

How to add component html in existing Angular component

1 Answers1