Strip html in Angular template binding

user_4476186 0
Viewed 13928

I have a list displaying data that can sometimes contain HTML 

  <li *ngFor="let result of results">
    <span [innerHTML]="result.question.title">
    </span>
  </li>

The problem with using innerHTML is that the HTML gets parsed and rendered, so things like <p> tags will add margins and ruin the list's alignment.

I would like to strip all html tags and just output plain text.

An approach like this:

  <li *ngFor="let result of results">
    <span>
        {{result.question.title}}
    </span>
  </li>

does not strip the HTML, it just outputs the HTML as plain text.

How can I strip the HTML and leave plain text the 'Angular' way?

angular2-template angular html
2 Answers

I wouldn't recommend using a regex to parse html as suggested by kite.js.org. Use the browsers textContent / innerText function instead:

htmlToText(html: string) {
    const tmp = document.createElement('DIV');
    tmp.innerHTML = html;
    return tmp.textContent || tmp.innerText || '';
}

This should be much more reliable. You can still use a pipe if you like, just don't use regex to parse html!

user_30221270
Related