将具有自定义angular指令和属性的HTML元素添加到Angular Component中

Question

Here is the function, I'm using to add a component dynamically with additional HTML elements. In which element I'm trying to add Angular Custom Directive & Attributes. And it is not working. :(

addComponent(component:any){
    let componentRef = this.componentFactoryResolver
    .resolveComponentFactory(component)
    .create(this.injector);

    this.appRef.attachView(componentRef.hostView);
    const domElem = (componentRef.hostView as EmbeddedViewRef<any>)
    .rootNodes[0] as HTMLElement;

    var newcontent = document.createElement('div');
    newcontent.innerHTML = `<h1 myDirective [myAttr]="myVar" myAttr2="myVar2">${this.demoText}</h1>`;
    domElem.appendChild(newcontent);
    document.getElementById("testid").appendChild(domElem);
}

Here myDirective is a Custom Angular Directive. myAttr, myAttr2 are Attributes of the Custom Angular Directive. myVar, myVar2 are may static text or variables of the same component.

Answer 1

changing the innerHTML in Angular is not a good Idea. You have to create a directive where you bring in an instance of Renderer2 to render the components you need. Please read the following Article => https://alligator.io/angular/using-renderer2/ Regards Michael