Strip html in Angular template binding

Question

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?

Answer 1

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!

Answer 2

I guess there is no direct way to strip HTML tags from string, you can use Pipe, write a "Pipe" like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'striphtml'
})

export class StripHtmlPipe implements PipeTransform {
    transform(value: string): any {
        return value.replace(/<.*?>/g, ''); // replace tags
    }
}

then add "StripHtmlPipe" to your module "declarations", after these steps you can use this pipe in your HTML:

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

please note that the code above is not fully tested.