TypeScript add dynamic HTML mat elements

Question

I know that I can add custom HTML through TypeScript on this way:

<div class="one" [innerHtml]="htmlToAdd"></div>
this.htmlToAdd = '<div class="two">two</div>';

This work fine, but if I try to add some mat elements(for example mat-card) this not work. All content in mat-card is visible, but the mat-card element is ignored. Why?

When I try this:

this.htmlToAdd = '<mat-card><h1>Hello</h1></mat-card>';

H1 element is printed, but not in the card. Why?

I think `mat-card` is an Angular component. You can't use `innerHTML` with components. — Explosion Pills, Sep 12 '18 at 14:20

score 0 · Accepted Answer · answered Sep 12 '18 at 14:35

ElementRef can do that for you. Since you have no code to work with, I can just link you some guide & SO answers :

https://medium.com/front-end-hacking/dynamically-add-components-to-the-dom-with-angular-71b0cb535286

https://medium.com/@caroso1222/angular-pro-tip-how-to-dynamically-create-components-in-body-ba200cc289e6

Dynamically add Component in angular 2/4

TypeScript add dynamic HTML mat elements

1 Answers1