[Fixed] How to edit HTML document with tags in textarea without displaying the tags?


This is something I’m struggling a bit. I have this textarea which can display text with HTML tags. I’m using Angular 10 and angular-material/@latest.

Here’s the textarea that displays the HTML document.

<mat-form-field *ngIf="editStatement">
                            <textarea matInput [innerHTML]="statement.statement_description_html"></textarea>

The form looks like this:

enter image description here

What I want is to not display the HTML tags but interpret it and show texts only in the textarea. Is that possible? Some in other SO posts suggests to do

<textarea [innerHTML]="getInnerHTML(name)" cols="" rows=""></textarea>

and in .ts file

    return val.replace(/(<([^>]+)>)/ig,'');

The problem with this approach is that it removes all the tags. I want to retain the tags but provide a way to edit the text – somewhat like some of the CMS systems like WordPress, Wix etc.

Can I do this using Angular?


Maybe you are looking for a "WYSIWYG" HTML Editor (like TinyMCE) that you can embed into your page.

Leave a Reply

(*) Required, Your email will not be published