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

Valentin Harrang
  • 1,081
  • 2
  • 17
  • 34
  • 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. – Günter Zöchbauer Jan 14 '18 at 11:50
  • Thank you for your response. That is to say ? What can I do to solve my problem? – Valentin Harrang Jan 14 '18 at 12:15
  • Something like https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular or just do not use bindings in dynamically added HTML. You could modify the content imperatively before adding it to the DOM. – Günter Zöchbauer Jan 14 '18 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 https://stackoverflow.com/a/39126327/8248966 ? – Valentin Harrang Jan 14 '18 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? – Günter Zöchbauer Jan 14 '18 at 12:43
  • content_part1 is a string that contains HTML tags with text – Valentin Harrang Jan 14 '18 at 12:48
  • Can you please create a minimal reproduction in http://stackblitz.com – Günter Zöchbauer Jan 14 '18 at 12:52
  • It's very difficult to create a minimal a reproduction because there is a lot of dependence, can I send you my project by mail or use TeamViewer ? – Valentin Harrang Jan 14 '18 at 13:04
  • Sorry, but I'm not interested in a complicated project. You should be able to reproduce with a few lines. No need to add any code of your project except what you already posted in your question. Just demonstrate how `[innerHTML]="..."` does not render the passed HTML. – Günter Zöchbauer Jan 14 '18 at 13:07
  • Ok, I try that. – Valentin Harrang Jan 14 '18 at 13:12
  • It works if I create a string variable in https://stackblitz.com/edit/ionic-6vjpzf .. I don't understand why .. In my real project, I make an http request that I get in an observable and I loop above – Valentin Harrang Jan 14 '18 at 13:40
  • I guess it's up to you to figure out where the difference is. Sorry, but there is no way to do it from here if you can't provide a reproduction. – Günter Zöchbauer Jan 14 '18 at 13:42
  • I can not provide replication because it is not possible to make an http request in stackblitz.com/edit/ionic-6vjpzf – Valentin Harrang Jan 14 '18 at 13:45
  • You don't need to drag in the world to get a reproduction. You can just copy the text your HTTP request returns and copy it into the stackblitz example. You'll have to examine bit for bit until you find where the difference is that causes your behavior. That's what software developers do ;-) – Günter Zöchbauer Jan 14 '18 at 13:46
  • that's what I did, I copied / pasted the string returned by my http request and assigned it to a variable – Valentin Harrang Jan 14 '18 at 13:48
  • Your stackblitz doesn't seem to use the `keepHtml` pipe you demonstrate in your question. – Günter Zöchbauer Jan 14 '18 at 13:51
  • because basically it does not work with only an innerHTML, except that yes there – Valentin Harrang Jan 14 '18 at 14:02
  • The short string is interpreted but not the long string – Valentin Harrang Jan 14 '18 at 14:46
  • I updated your stackblitz with your pipe and `Observable.of()` function to imitate HTTP response, seems to work properly, also added some inline style: https://stackblitz.com/edit/ionic-tag2dg?file=pages/home/home.ts – Andriy Jan 14 '18 at 14:53
  • Maybe there is some problem with your HTTP response processing. Could you share relevant to HTTP call/response code? – Andriy Jan 14 '18 at 15:01

0 Answers0