title: How to add component html in existing Angular component
body: <p>I have an app component in my angular application.</p>
  
  <pre><code>@Component({
      selector: my-container',
      template: `&lt;div [innerHTML]="infoComponentHtml"&gt;&lt;/div&gt;`
  })
  export class MyContainerComponent implements AfterViewInit {
  
      @Input() infoComponentHtml: string = "";
  
      constructor(private componentFactoryResolver: ComponentFactoryResolver){
  
      }
  
      ngAfterViewInit(): void {
          if(this.infoComponentHtml){
              ??????
              append this.infoComponentHtml dynamically
          }
          else{
              ??????
              append "&lt;default-content&gt;&lt;/default-content&gt;" dynamically
          }
      }
  }
  </code></pre>
  
  <p><code>this.infoComponentHtml</code> format is like this <code>"&lt;component-name&gt;&lt;/component-name&gt;"</code></p>
  
  <p><code>this.infoComponentHtml</code> is third party component that comes from another component. So I do not know the component class name of it. </p>
  
  <p>How can I compile and add append the component?</p>