ngModel innerHTML works in p tag but not in input tag angular2

Question

In one of my angular2 application, I want to show the innerHTML of the model in the input field which has a model is attached to it.

<input type="text"  [(ngModel)]="studentCategory" [innerHTML]="studentCategory"/>

the value of studentCategory is coming from data base which has some '& #174;' values. which is directly showing up in the text boxes, rather it should show a register symbol

i can easily show this in the following way

<p [innerHTML]="studentCategory"/></p>

but not in input which has model attach to it.

Thanks in advance.

Answer 1

innerHTML refers to the content of the HTML tags.

A <p> tag may contain phrasing content. An <input> tag, however, must be empty. It may not have any child elements nor text content.

<p [innerHTML]="'hello'"></p> resolves to <p>hello</p>. This is legal HTML. But <input>hello</input> is not valid. (<textarea>hello</textarea> would be valid).

You need to ensure that the HTML-entities are already unescaped before you assign the string to your ngModel variable studentCategory.