-1

I've some api data..Html Markup in Json format:

[
  {
     type: 'p',
     attributes: [...],
     children: [{...},{...}]
  }
]

I would like to render that in an angular template. Since the name of the tag come from the api, i need to interpolate the tag name.

i tried this:

<ng-container *ngFor="let el of body">
   <{{el.type}}> foo bar</{{el.type}}>
</ng-container>

but got "Unexpected closing tag "{{el.type}}".

expected output:

<p> foobar</p>

And I don't want to use innerHtml directive.

amanhasnoname
  • 236
  • 1
  • 4
  • 16
Benni
  • 69
  • 1
  • 4
  • 1
    Its an array of object. Try {{el[0].type}} to get the first type of el object – varman Aug 13 '19 at 18:14
  • updated the snippet. I'm already at the object level. – Benni Aug 13 '19 at 18:19
  • Possible duplicate of [Angular2 - Interpolate string with html](https://stackoverflow.com/questions/38279071/angular2-interpolate-string-with-html) – Rich Aug 13 '19 at 18:24
  • 1
    i want to use the type property as html tag – Benni Aug 13 '19 at 18:31
  • Why don't you want to use `[innerHTML]`? I know one possible reason but I would like to know what your reason is... – ConnorsFan Aug 13 '19 at 19:01
  • there are multiple reasons for that. it's hard to use directives or bindings on innerHtml. styling is a pain (ng-deep) and so on. Last but not least, i don't think it's reasonable to generate a whole page in a service or component , if you've a template engine. – Benni Aug 13 '19 at 19:09

3 Answers3

0

construct your html inside js assign it to local variable and finally pass that value into innerhtml it will render as you expected

prakash_ng
  • 16
0

You can simply use [innerHTML] directive to accomplish it.

Ramana
  • 1,692
  • 3
  • 18
  • 34
-1

You can use [textContent] if you don't want to use [innerHTML].

compileRavi
  • 11
  • 2