title: Angular: How to dynamically load a component defined by a string?
body: <p>How do I compile a component defined by a string and render it in my template?</p>
  <p>I tried using <a href="https://angular.io/api/platform-browser/DomSanitizer" rel="nofollow noreferrer"><code>DomSanitizer</code></a>:</p>
  <pre class="lang-js prettyprint-override"><code>this.sanitizer.bypassSecurityTrustHtml(parsedLinksString);
  </code></pre>
  <p>But that doesn't properly bind the <code>click</code> event handler <code>onButtonClick()</code>.</p>
  <h3>Desired Functionality</h3>
  <pre class="lang-js prettyprint-override"><code>@Component({
      selector: 'app-sample-component',
      templateUrl: './sample-component.component.html',
      styleUrls: ['./sample-component.component.scss']
  })
  export class SampleComponent {
  
    buildMessage() {
      // How do I parse this string and render so that it responds to events?
      const myOutput = '&lt;button (click)=&quot;onButtonClick()';
    }
  
    onButtonClick() {
      console.log('Handler for Dynamic Button');
    }
  
  }
  
  </code></pre>