title: ngx-text-diff not updating when I dynamically add html attributes
body: <p>I'm using a npm package called ngx-text-diff to build a file content comparator, i successfully imported its component and it's working great, the html selector takes 2 arguments left and right which represent the 2 string to compare.
  The problem is that i'm trying to dynamically change these attributes by letting the user chose 2 files from a list and then add their content to right and left but the text-diff component doesn't update and nothing happens.</p>
  
  <pre><code>        &lt;td-ngx-text-diff id="textdiff" [attr.left]="selected[0]?.content" [attr.right]="selected[1]?.content"&gt;&lt;/td-ngx-text-diff&gt;
  </code></pre>
  
  <p>Here is my function to add a file : </p>
  
  <pre><code>  add(selectedFile) {
      if(selectedFile != null || selectedFile != undefined)
      {
          if(this.selected.length &lt; 2){
            this.selected.push({'content': selectedFile.content, 
            'path': selectedFile.path});
            const toastRef: NbToastRef = this.toastrService.success(`${selectedFile.path} successfuly added`);
        }
        else{
            const toastRef: NbToastRef = this.toastrService.danger("You already selected 2 files");
        }
      }
      console.log(this.selected)
    }
  </code></pre>
  
  <p>the html element is updating but it doesn't display anything :</p>
  
  <p><a href="https://i.stack.imgur.com/ljlQC.png" rel="nofollow noreferrer">Html output with attributes added</a></p>
  
  <p>View isn't updated :</p>
  
  <p><a href="https://i.stack.imgur.com/QQoH0.png" rel="nofollow noreferrer">View</a></p>