4

I have following HTML with a property binding:

<div [innerHtml]="logOutput"></div>

In my component I add now some content with this line of code

this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr );

But nevertheless I get this error "SafeValue must use [property]=binding".

Why I get this error? I'm already using property binding! I'm using Angular 5.

Edit: I tried out using a custom pipe inside the HTML and it worked fine, but I want a solution without pipes.

Edit2:

Here my function, where I set the HTML, maybe it helps. A complete working example is not possible, because my app deals with command line tools and output streams (I have Angular in an Electron frame)

this.logStream.on('data', (chunk) => {
  let otpStr = chunk.toString();
  if (otpStr == '') {
    return;
  }

  otpStr = this.StylePipe(otpStr); // Convert ANSI Styles to HTML with CSS
  otpStr = otpStr.replace(/\r?\n/g, '<br />');
  otpStr = otpStr.replace(/<br \/><br \/>/g, '<br />');
  otpStr = otpStr.replace(/^<br \/>/, '');
  otpStr = otpStr.replace(/<br \/>$/, '');
  this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr + '<br />' );
  this.ref.detectChanges();
});

this.logStream.on('end', () => {
  this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + '<br />' );
  this.ref.detectChanges();
});
Sumafu
  • 179
  • 1
  • 3
  • 15
  • Works fine here: https://stackblitz.com/edit/angular-1lsxvy?file=app%2Fapp.component.html. Post a complete minimal example reproducing the problem. – JB Nizet Jan 27 '18 at 09:10
  • I added some more code. A working example would very hard, because it isn't just a web app – Sumafu Jan 27 '18 at 09:18
  • 2
    It's not very hard at all. See, I just did: https://stackblitz.com/edit/angular-iottff?file=app%2Fapp.component.ts. You're concatenating `this.logOutput` , which is not a string, but an instance of SafeHtml, with '
    '. Don't do that. Generate a HTML string, by concatenating strings together, then call bypassSecurityTrustHtml on that string.     – JB Nizet Jan 27 '18 at 09:25
  • Thank you, the "Do not concat" thing works ;) – Sumafu Jan 27 '18 at 09:49

1 Answers1

2

I now solved the problem with help of @JB Nizet in the comments. I'm now using two variables. The first is a helper variable containing the raw HTML I generate, the other variable contains the sanitised HTML which is bind to HTML, because you cannot concat SafeHtml (the result of bypassing) and a string.

this.logOutputHtml += otpStr;
this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutputHtml );
Sumafu
  • 179
  • 1
  • 3
  • 15