Angular parent component render of HTML containing Angular code

Asked Aug 15 '20 at 19:56

Active Aug 15 '20 at 20:25

Viewed 164 times

I have an Angular parent component that makes an API call to obtain HTML content from CMS. But the CMS content has Angular code and needs to access parent scope's variables/events, e.g. this could be HTML need to be inserted into parent HTML template and rendered:

const cmsHTML = "<div (click)="parentFunc()">{{parentVar}}</div>"

Please help with how could I render this from the parent component.

I found that DomSanitizer can insert this HTML but it won't get compiled so everything here shows up as text. ng-content didn't seem to work also. Please help. Thank you!

edited Aug 15 '20 at 20:04

R. Richards

24,603
10
64
64

asked Aug 15 '20 at 19:56

Evan

Try `
` to render content as HTML – Kamran Khatti Aug 15 '20 at 20:00
That doesn't work since {{parentVar}} will be shown as text, not compiled. – Evan Aug 15 '20 at 20:09
Thats a poor practice, instead of HTML return JSON data try update the response. – Kamran Khatti Aug 15 '20 at 20:10
I wish I could. Customer request need to have angular code inside HTML. – Evan Aug 15 '20 at 20:17
Then code like `{{parentVar}}` should also need to be present in component to render otherwise it will not have any value. – Kamran Khatti Aug 15 '20 at 20:18

Angular parent component render of HTML containing Angular code

0 Answers0