Angular 8 替换动态插入内容中的标签

Question

Is it possible to replace dynamically inserted angular component tags?

I have text like the following which I am getting from an api:

Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>

I have a test component and all I am trying to achieve is for the output from the text component to replace the <app-test></app-test> tags.

In my ts file, I am using DomSanitizer so my tags are not striped out, shown below:

this.text = this.sanitizer.bypassSecurityTrustHtml("Testing <app-test></app-test> for <app-test></app-test> dynamically inserting another <app-test></app-test>");

And in my html I am using one-way binding to display the text, like below:

<div [innerHTML]='text'></div>

But the output is just the text without the tags.

Answer 1

You can create a dynamic components by a component ref In this link you can read about it: https://medium.com/@lukaonik/how-to-create-dynamic-components-in-angular-a2f449acb987

Other solution but not the best is call different components by an ng-swich