title: SafeValue must use [property]=binding although I'm already using property binding
body: <p>I have following HTML with a property binding:</p>
  
  <pre><code>&lt;div [innerHtml]="logOutput"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my component I add now some content with this line of code</p>
  
  <pre><code>this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr );
  </code></pre>
  
  <p>But nevertheless I get this error "SafeValue must use [property]=binding".</p>
  
  <p>Why I get this error? I'm already using property binding! I'm using Angular 5.</p>
  
  <p>Edit: I tried out using a custom pipe inside the HTML and it worked fine, but I want a solution without pipes.</p>
  
  <p>Edit2:</p>
  
  <p>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)</p>
  
  <pre><code>this.logStream.on('data', (chunk) =&gt; {
    let otpStr = chunk.toString();
    if (otpStr == '') {
      return;
    }
  
    otpStr = this.StylePipe(otpStr); // Convert ANSI Styles to HTML with CSS
    otpStr = otpStr.replace(/\r?\n/g, '&lt;br /&gt;');
    otpStr = otpStr.replace(/&lt;br \/&gt;&lt;br \/&gt;/g, '&lt;br /&gt;');
    otpStr = otpStr.replace(/^&lt;br \/&gt;/, '');
    otpStr = otpStr.replace(/&lt;br \/&gt;$/, '');
    this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + otpStr + '&lt;br /&gt;' );
    this.ref.detectChanges();
  });
  
  this.logStream.on('end', () =&gt; {
    this.logOutput = this.sanitizer.bypassSecurityTrustHtml( this.logOutput + '&lt;br /&gt;' );
    this.ref.detectChanges();
  });
  </code></pre>