0

It has been several days since I am stuck on a problem that I do not see where it can come from.

I currently retrieve the content of my article in an observable and I loop over it in the angular template. So far I have no problem I get my information well that I display but the HTML is not interpreted with an innerHTML, nor with a pipe using the DomSanitizer.

I tried to store the information of my observable in a table to see if it does not come from the asynchronous but no.

I saw that it was necessary to use the DomSanitizer to force the security because when the string that contains the HTML is too long (which is my case because it is long paragraphs), the innerHTML has not no effect.

The string fits well in my pipe because when I make a console.log of my variable containing the string, it shows me well in my console with HTML tags around.

If you have any idea where my problem may come from, knowing that I have no errors in the console.

Here is my code without the pipe and HTML not interpreted :

<div *ngFor="let article of informationsArticle|async;">

      <div [innerHTML]="article.contenu_part1" *ngIf="article.contenu_part1"></div>

</div>

With the pipe and HTML not interpreted:

<div *ngFor="let article of informationsArticle|async;">

      <p [innerHTML]="article.contenu_part1 | keepHtml" *ngIf="article.contenu_part1"></p>

</div>

The pipe code :

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'keepHtml', pure: false })
export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

I added it in "declarations" of app.module.ts file as well as its import at the top of the file.

Rendering the source code in the console :

enter image description here

20
  • 1
    Angular processes only HTML added to a components template statically. HTML added by innerHTML will be added as is. Angular won't even look at it except for sanitization to prevent XSS. Commented Jan 14, 2018 at 11:50
  • Thank you for your response. That is to say ? What can I do to solve my problem? Commented Jan 14, 2018 at 12:15
  • Something like stackoverflow.com/questions/38888008/… or just do not use bindings in dynamically added HTML. You could modify the content imperatively before adding it to the DOM. Commented Jan 14, 2018 at 12:26
  • If I take the second solution that you propose to me, that is to say that I must remove my pipe and the innerHTML in the template and use nativeElement.innerHTML in the typescript ? Like that stackoverflow.com/a/39126327/8248966 ? Commented Jan 14, 2018 at 12:38
  • I didn't see the actual problem at first. I assumed you wanted to use Angular-specific markup in the dynamically added HTML. Just adding plain HTML should work with [innerHTML]="..." binding. There has to be something else that goes wrong. Perhaps article.contenu_part1 already returns an encoded string? Commented Jan 14, 2018 at 12:43

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.