0

This is the code in my appComponent.ts:

var res = this.http.get('/assets/panels.json');
res.subscribe(res => this.panels = res.json());

Below is the json file:

[{
  "title": "panel1",
  "content": "<mat-tab-group><mat-tab label="Tab 1">Content 1</mat-tab><mat-tab label="Tab 2">Content 2</mat-tab<</mat-tab-group>"
 },
 {
  "title": "panel2",
  "content": "content2"
}]

But in the browser, whatever content I have sent in tags are displayed as it is. Its not compiling it as html for example <h1>HI</h1> should be shown as HI in browser.

Same has to be done for data in mat-tab-group, please help on this.

Kirk Larkin
  • 84,915
  • 16
  • 214
  • 203
Shreelakshmi G
  • 119
  • 2
  • 16
  • so what you have tried? – Sajeetharan Dec 09 '17 at 20:52
  • I have tried doing this using typescript files instead of json. But found it difficult so again I'm back to json implementation. Text content sent from json will be displayed properly but if html content is sent it is displayed along with the tags in GUI. – Shreelakshmi G Dec 09 '17 at 20:56

1 Answers1

2

You have to set the innerHtml of the corresponding tag. Unless you set in in the innerHtml Angular will sanitize the content for you in the interpolation tags {{}}

Something like this considering your response object

<div [innerHTML]=“res.content”></div>
Hugo Noro
  • 3,145
  • 2
  • 13
  • 19
  • Thanks for the answer. Actually I will be sending different types of data ex: text, HTML, numbers etc... Data being sent to HTML page will be dynamic. So can we apply your suggestion for all types of data? – Shreelakshmi G Dec 09 '17 at 21:16
  • Of course. If you think in an html page if you place an html tag it is processed by the browser. If you just put a number or a text it shows anyway without any formatting. The only concern with using innerHtlm is because it’s not sanitised you have to trust the data because if some malicious script comes in the data ( javascript) it will be executed. – Hugo Noro Dec 09 '17 at 21:18
  • Thank u for the suggestion. Using innerHTML i am getting only the content inside the tag,but it is not recognizing which tag it is.Even though it is a button ,it is printing it as a text only. Actually i am trying to put the component like button or tabs inside expansion panels of an accordion.Please tel me way to get the component inside expansion panel dynamically. – Shreelakshmi G Dec 10 '17 at 07:16
  • That’s weird. Is it a simple button or a component? Because innerHTML does not compile Angular code. It just spits out the html code as is. If you’re passing something more elaborate like components and things like that it won’t work. Have a look at this https://stackoverflow.com/questions/40473910/how-to-dynamically-add-innerhtml-with-angular-2-components – Hugo Noro Dec 10 '17 at 16:28
  • Actually I'm creating different types of components in each accordion i.e., 1 accordion contains just a text. Another contains tabs inside, and next one contains form with buttons, images. So each accordion contains different types of data.I have make it dynamically load all types of html entities/ angular components inside the each accordion. Thanks for the quick response. – Shreelakshmi G Dec 20 '17 at 06:55