How to use innerHTML on input

Question

This works: <div [innerHTML]="rssItem.title"></div>

This does not:
<input type="text" formControlName="title" [(ngModel)]="rssItem.title" name="title" #title class="form-control" [innerHTML]="rssItem.title">

Why?

I have attempted using a sanitize html pipe as explained here but it does not work for text input.

Using Angular2 version 2.4.5 on Windows.

What are you attempting to accomplish with the innerHTML bind? — silentsod, Feb 06 '17 at 22:57

score 2 · Answer 1 · edited May 23 '17 at 12:32

2

Here is a simple way to decoding HTML characters (Reference)

constructor() {
   let str = "&#39134;&#24605;&#21345;&#23572;&#26368;&#26032;MCU";
   this.rssItem.title = this.decodeHtml(str);
}

private decodeHtml(html: string) {
 var txt = document.createElement("textarea");
 txt.innerHTML = html;
 return txt.value;
}

Furthermore, use Sanitizer to have the safe html string. (Reference)

edited May 23 '17 at 12:32

Community

1
1

answered Feb 07 '17 at 02:52

KarateJB

941
2
10
22

1

Looks like we came up with same solution. Thank you! – septemberbrain Feb 07 '17 at 02:53

score 1 · Answer 2 · edited May 23 '17 at 11:46

1

Found a solution based on this answer

Created a private function :

decodeEntities(encodedString) {
  var textArea = document.createElement('textarea');
  textArea.innerHTML = encodedString;
  return textArea.value;
}

And used it to decode the string.

Tried to create a pipe using the same code but wasn't able to get it to work in the Input Text tag. If someone has an idea on how to do that please post it.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 07 '17 at 02:52

septemberbrain

998
9
25

1

Found another solution using the he encoder/decoder (https://www.npmjs.com/package/he) which I think works better. – septemberbrain Feb 07 '17 at 20:16

How to use innerHTML on input

2 Answers2