Strip html in Angular template binding - html

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 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.

Answer 2

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!