CODEWITHSUNDEEP
angularangular-material-tablengx-editor
aladdin hammodi
aladdin hammodi

Reputation: 21

Implementing ngx-editor on mat-table-cell Angular

I used ngx-editor on one component of my project in order to edit some data that needs to be saved. And then to be shown on a table (mat-table)

enter image description here

When showing this data on a table it is show like this: enter image description here

How could I fix this in order to show the edited data on the mat-cell-table like it was entered?

Upvotes: 0

Views: 596

Answers (2)

PeS
PeS

Reputation: 4039

What Gonzalo says is basically right, you should bind that as innerHTML however you need to run that through DOM sanitizer first (usually implemented as pipe).

<mat-cell><span [innerHTML]="htmlval | safeHtmlPipe"></span></mat-cell>

Upvotes: 0

Gonzalo Iv&#225;n Chaparro Barese
Gonzalo Iv&#225;n Chaparro Barese

Reputation: 1

I hope you already got to resolve your issue. But if you (or if anyone else on the internet) haven't managed to resolve it I can try to help.

What is happening here is ngx-editor stores the data generated inside a pure string, which you then have to parse into HTML and add it to the DOM. I will make an assumption and say you're directly adding the string into the mat-table by using {{ editorContent }} or something like that (or maybe <table mat-table [dataSource]="editorContent">). Anyhow, what you actually need to do is to use the [innerHTML] data binding which is available in any selector tag inside Angular in the following way:

<selector-tag [innerHTML]="editorContent"></selector-tag>

I'm sorry for not being 100% specific but it's hard to give an exact example without a glimpse of your actual code and how're is it that you're managing your data.

With that being said, I hope at least it has helped you or anyone else. Cheers!

Upvotes: 0

Related Questions