CODEWITHSUNDEEP
angularangular2-directives
septemberbrain
septemberbrain

Reputation: 1008

How to use innerHTML on input

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.

Upvotes: 0

Views: 5463

Answers (2)

septemberbrain
septemberbrain

Reputation: 1008

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.

Upvotes: 2

KarateJB
KarateJB

Reputation: 961

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)

Upvotes: 3

Related Questions