Search code examples
angularsanitizationproperty-binding

SafeValue must use [property]=binding although I'm already using property binding

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();
});
Solution

  • 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 );