How to launch compare function programmaticaly ?

[Zakouille]

Hello,

I'm using this (awesome) tool in my angular school project.

But I need to call the compare function from the typescript side. Is that possible ?

My html code looks like this :

<div class="diffContainer">
  <td-ngx-text-diff left="{{this.initialText}}" right="{{this.changedText}}"></td-ngx-text-diff>
</div>

Problem is that the "changedText" won't update whenever I'm modifying it. I would like to 'refresh' the component every time a change is made to the "changedText".

Do you have an idea of how to achieve that ?

[ABenassi87]

Hi @Zakouille the readme file is out-dated. I had no much time to continue working on this tool, but I will work on it again soon. The component has an input called diffContent (observable type) that you can use to refresh the comparison. The src folder of this project you can see an example of how to use it. Each time that this.changedText is updated you should to use this observer to update the view.

<td-ngx-text-diff
          [left]="initialText"
          [right]="changedText"
          [diffContent]="contentObservable$"
        >
        </td-ngx-text-diff>

export interface DiffContent {
  leftContent: string;
  rightContent: string;
}
....
// Inside Component define observable
  contentObservable: Subject<DiffContent> = new Subject<DiffContent>();
  contentObservable$: Observable<DiffContent> = this.contentObservable.asObservable();

// Define a method that is called each time that `changedText` is updated:
 onChangedTextUpdated(textUpdated: string) {
  this.changedText = textUpdated;
  const newContent: DiffContent = {
    leftContent: this.initialText,
    rightContent: this.changedText
  };
  this.contentObservable.next(this.content);
}

With this code, the component should be updated.

Regards.

[Zakouille]

Thank you @ABenassi87 for such a fast and effective solution!

Just a small mistake, your last line of code should be changed to : this.contentObservable.next(newContent);

Otherwise, this will do the trick nicely. Thank you for this tool, it's really cool and easy integrate in my project.