title: dynamically created mat-checkbox not correctly rendered
body: <p>I create <code>&lt;mat-checkbox&gt;</code> elements dynamically from incoming data that fetched by API.</p>
  
  <p>component.ts:</p>
  
  <pre><code>this.content = sanitizer.bypassSecurityTrustHtml(`&lt;mat-checkbox&gt;test&lt;/mat-checkbox&gt;`)
  </code></pre>
  
  <p>component.html</p>
  
  <pre><code>&lt;div [innerHTML]="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>but the checkbox input is not rendered, the same issue occures if I used <code>&lt;input type="checkbox"&gt;</code> instead of `</p>
  
  <p>and it rendered correctly if I added <code>&lt;mat-checkbox</code> statically to component.html</p>
  
  <p>please check this repo:
  <a href="https://stackblitz.com/edit/angular-8heckn" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-8heckn</a></p>
  
  <p><strong>note:</strong></p>
  
  <p><code>this.content</code> is a string, not an object. because I want to add extra spaces (tabs) before each child input.</p>
  
  <p>for instance:</p>
  
  <ul>
  <li>programming
  
  <ul>
  <li>front-end
  
  <ul>
  <li>Angular</li>
  <li>React</li>
  <li>Vue</li>
  </ul></li>
  <li>back-end
  
  <ul>
  <li>node.js</li>
  <li>express.js</li>
  <li>php</li>
  </ul></li>
  </ul></li>
  </ul>