title: In Angular is there a way to inject html that contains a component directive into the template of a parent component?
body: <p>I would like to have html in my database that contains component directives and then use that as part of a component template in Angular.</p>
  
  <p>For an example, if I have:</p>
  
  <pre><code>&lt;div [innerHTML]="injectMe"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>in App component template and this in the code for app component:</p>
  
  <pre><code>export class AppComponent  {
    injectMe = "&lt;p&gt;Paragraph&lt;/p&gt; &lt;app-injected&gt;&lt;/app-injected&gt; ";
  }
  </code></pre>
  
  <p>then create a component named injected:</p>
  
  <p>template:</p>
  
  <pre><code>&lt;p&gt; injected works! &lt;/p&gt;
  </code></pre>
  
  <p>code:</p>
  
  <pre><code>@Component({
    selector: 'app-injected',
    templateUrl: './injected.component.html',
    styleUrls: ['./injected.component.css']
  })
  export class InjectedComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>I get a warning in the console that "sanitizing HTML stripped some content".  Following that chain, I tried to add a call to mark the string as safe using:    this.sanitizer.bypassSecurityTrustHtml</p>
  
  <pre><code>export class AppComponent  {
    injectHtml = "&lt;p&gt;Paragraph&lt;/p&gt; &lt;app-injected&gt;&lt;/app-injected&gt; ";
    injectMe: any;
  
    constructor(private sanitizer: DomSanitizer){
      this.injectMe = this.sanitizer.bypassSecurityTrustHtml(this.injectHtml);
    }
  }
  </code></pre>
  
  <p>That results in the directive tag being left in the HTML with no console warning about sanitize removing anything, but the component does not seem to be processed by Angular.  I saw you can use component factory to create components dynamically, however, I don't think this will help in my case unless I want to manually parse the HTML to check for the components.</p>