CODEWITHSUNDEEP
angularinnerhtml
user6791921
user6791921

Reputation:

Angular innerHTML doesn´t recognise HTML tags

I am learning Angular. On my first app, I installed this text editor to give users more power to format their texts than with a simple textarea.

It woriks fine. If for example I write

I am Luis?

I am 37 yrs old.

This is the link you gave me

I obtain this code, which will be inserted on the database and later show on the view when neccesary:

<p>How are you?<br><br>&nbsp;I am fine, thanks.    <br><br>&gt; This is &nbsp;<a href="https://github.com/froala/angular-froala-wysiwyg">the link</a> you gave me</p>

But when I try to show it on the view, I can´t manage the tags to be read as tags, and then, format my text.

I tried this:

As suggested here

But it doesn´t work, I obtain the same string, including the HTML tags, but no formatting.

Must say, user.description is the property where that text is stored.

I read something about unsafe HTML, so following another suggestions here , I also tried to add a pipe.

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return    this.sanitizer.bypassSecurityTrustHtml(style);
//return   this.sanitizer.bypassSecurityTrustStyle(style);
// return  this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

And then:

 <div [innerHtml]="product.descripcion | safeHtml"></div>

But still doesn´t work. HTML tags are interpreted as normal text, so I can´t show them as I want.

Thanks a lot.

Upvotes: 0

Views: 2325

Answers (2)

user6791921
user6791921

Reputation:

OK, it seems it was only a matter of forgetfulness and a lack of good sleep.

I was simply inserting the div on a section which don´t exist on my view any more. I did on the correct place now and it works like a charm. Shame on me and thanks for your help to you all.

Upvotes: 1

Erez Shlomo
Erez Shlomo

Reputation: 2282

Replace: 

<div [innerHtml]="product.descripcion | safeHtml"></div>

by: 

 <div [innerHTML]="product.descripcion | safeHtml"></div>

Upvotes: 0

Related Questions