How to bind html to ngModel in Angular

Question

I have an input control like TextArea where I use [(ngModel)] for two way binding. When displaying data that is HTML, it displays with HTML tags instead of interpreting it. For instance, I have HTML string <b>text</b> I want it to be displayed as text . How can I do that with ngModel?

Answer 1

Have made a stackblitz for this, please check this out:

https://stackblitz.com/edit/ngmodel-ngmodel-for-html-output

Well this is what I am doing here:

This is the HTML where for the text area I am using ngModel to see checkout the HTML and returning the HTML result in the below div.

<textarea 
  [(ngModel)]="content"
  cols="50" 
  rows="10"></textarea>

<br><br><br>

<div [innerHtml]="content"></div>

This is the TypeScript File where I am initially giving an Input but it's not important. Make sure to atleast define the property.

content = 
`<h2>Hello</h2>
<p>This is a great example...</p>
`;

I hope this solves your issue...