0

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!

Improve this question
5
  • Try <div [InnerHTML]="cmsHTML"></div> to render content as HTML Commented Aug 15, 2020 at 20:00
  • That doesn't work since {{parentVar}} will be shown as text, not compiled. Commented Aug 15, 2020 at 20:09
  • Thats a poor practice, instead of HTML return JSON data try update the response. Commented Aug 15, 2020 at 20:10
  • I wish I could. Customer request need to have angular code inside HTML. Commented Aug 15, 2020 at 20:17
  • Then code like {{parentVar}} should also need to be present in component to render otherwise it will not have any value. Commented Aug 15, 2020 at 20:18
Related questions
1096
Angular HTML binding
561
@Directive vs @Component in Angular
1
Render a nested component dynamically (created in the parent component) as a directive
Load 3 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.