0

The problem I'm having is the html page is showing the actual div tags rather than the specified words with the style (red) placed within the div tag.

HTML file: <div>{{card.info}}</div>

     ts file: return [
>                   { title: 'Latest Articles', cols: 2, rows: 1, info: '< input type="text" value="not working" /> '},
>                   { title: 'Stats', cols: 2, rows: 1, info: 'ggg' }];
Mr. Litty
  • 1
  • 2
  • That post does not address my question. Can you please thoroughly read my question.?? I am not just passing content I am passing/binding styled tags. In this case
    tags with styles. Thanks
     – Mr. Litty Oct 09 '18 at 23:31
  • It does address your question, the second answer is what you are looking for. Look for `safeHtml` pipe in that answer. Reason is that angular sanitizes the string before using it as `innerHTML` and removes inline styles. You have to explicitly `bypassSecurityTrustHtml` or use classes instead of inline styles. – Ludevik Oct 10 '18 at 05:58
  • { title: 'Solution', cols: 2, rows: 1, info: '< input type="text" value="not working" /> ' }, is showing < input type="text" value="not working" /> after I used the referred post. – Mr. Litty Oct 10 '18 at 21:58
  • Well the big problem is the css file is not effecting the html. – Mr. Litty Oct 11 '18 at 03:05

1 Answers1

0

The problem I'm having is the html page is showing the actual div tags rather than the specified words with the style (red) placed within the div tag.

If you want to render a value as html you have to use [innerHTML]. 

<div [innerHTML]="card.info"></div>

Reference: https://angular.io/guide/template-syntax#property-binding-or-interpolation

basarat
  • 261,912
  • 58
  • 460
  • 511
  • Hey, thanks for the response. That did not work instead it returned "fff" without the div tags. I already was getting that result. What I am trying to do is pass the content enclosed in the div tags rendered with the style desired. – Mr. Litty Oct 09 '18 at 23:25