dynamically created mat-checkbox not correctly rendered

Question

I create <mat-checkbox> elements dynamically from incoming data that fetched by API.

component.ts:

this.content = sanitizer.bypassSecurityTrustHtml(`<mat-checkbox>test</mat-checkbox>`)

component.html

<div [innerHTML]="content"></div>

but the checkbox input is not rendered, the same issue occures if I used <input type="checkbox"> instead of `

and it rendered correctly if I added <mat-checkbox statically to component.html

please check this repo: https://stackblitz.com/edit/angular-8heckn

note:

this.content is a string, not an object. because I want to add extra spaces (tabs) before each child input.

for instance:

• programming
  • front-end
    • Angular
    • React
    • Vue
  • back-end
    • node.js
    • express.js
    • php

Answer 1

"Angular doesn't process HTML added dynamically, it just adds it verbatim except some sanitization to prevent security issues." [see Stackoverflow question How to dynamically add innerHTML with angular 2 components]

To learn about adding Angular components dynamically, see the following:

• Dynamically ADDING and REMOVING Components in Angular
• Angular2: Insert a dynamic component as child of a container in the DOM
• Angular: How to dynamically load a component defined by a string?