How to display html tags as plain text in angular

I'm developing a blog using Angular. There I want to show HTML string retrieved from the database as plain text (for listing each blog post's preview). The HTML rich-text was generated using ngx-quill.

I can able to render the rich text by using the code . But I need to render the same content as plain text.

How can I do this in an ngx-quill / Angular way. Please help! I prefer not to go for fetching DOMElement.text() method using JavaScript.

Do Nhu Vy

41k47 gold badges181 silver badges254 bronze badges

asked Jun 22, 2020 at 1:43

2

i don't know about quill..

so may be there will be another good solution

i think you can solve this problem with pipe something like this

@Pipe({ name: 'truncateHtml' })
export class TruncateHtmlPipe implements PipeTransform{

    constructor() { }

    transform(text: string ) {

        if (!text) {
            return text;
        }

        let without_html = text.replace(/<(?:.|\n)*?>/gm, ' ');
        
        return without_html;
    }

}

if you don't wanna use in template

just return that value and use it

i hope it helps

answered Jun 22, 2020 at 5:38

1

I think you can use innerHTML like this

I used it before also with Quill

answered Jun 22, 2020 at 7:13

3

Basically, there are two methods for displaying HTML tags as plain text.

1. Using