title: Insert component into html dynamically
body: <p>I'm trying to insert a angular-material component inside a piece of html dynamically. The way i think, i won't be able to use <a href="https://angular.io/api/core/ViewContainerRef" rel="noreferrer">ViewContainerRef</a>.</p>
  
  <p>Here's how it needs to work:</p>
  
  <p>I'll retrieve a <strong>string</strong> from the database (it can be any material component, such as inputs, buttons, etc... Something like this:</p>
  
  <pre><code>let stringFromDB = "&lt;md-spinner&gt;&lt;/md-spinner&gt;"
  </code></pre>
  
  <p>I would need to pass this string to my html's div (which is my "container"). So i tryied:</p>
  
  <pre><code>@Component({
      selector: 'report',
      template: `&lt;div [innerHtml]="stringFromDB"&gt;&lt;/div&gt;`
  })
  export class ReportComponent{
      stringFromDB : string = null;
  
      constructor(){  
          this.stringFromDB =this.someService.getTemplateStringFromDatabase();
      }
  }
  </code></pre>
  
  <p>I can pass a simple <code>&lt;p&gt;&lt;/p&gt;</code>. 
  But not a component like md-spinner. Any thoughts on how to accomplish this? </p>