I'd like to use the google diff/match/patch lib
in an angular app to show the difference between two texts.
My usage would be something like this:
public ContentHtml: SafeHtml;
compare(text1: string, text2: string):void {
var dmp = new diff_match_patch();
dmp.Diff_Timeout = 1;
dmp.Diff_EditCost = 4;
var d = dmp.diff_main(text1, text2);
dmp.diff_cleanupSemantic(d);
var ds = dmp.diff_prettyHtml(d);
this.ContentHtml = this._sanitizer.bypassSecurityTrustHtml(ds);
}
Problem is, how do I import diff_match_patch
for this line?
var dmp = new diff_match_patch();
You need to import the npm package for angular project in package.json
.
"diff-match-patch": "^1.0.5",
and import in component as:
import { Component } from '@angular/core';
import DiffMatchPatch from 'diff-match-patch';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
getDiff() {
var dmp = new DiffMatchPatch();
var diff = dmp.diff_main('Hello', 'Hallo');
// Result: [(-1, "Hell"), (1, "G"), (0, "o"), (1, "odbye"), (0, " World.")]
dmp.diff_cleanupSemantic(diff);
// Result: [(-1, "Hello"), (1, "Goodbye"), (0, " World.")]
console.log(diff);
}
}