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
– Explosion Pills, Commented Sep 12, 2018 at 14:20

Jacopo Sciampi · Accepted Answer · 2018-09-12 14:35:55Z

0

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

answered Sep 12, 2018 at 14:35

Jacopo Sciampi

3,5042 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript add dynamic HTML mat elements

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related