A wrapper in angular to use the diff npm library (https://www.npmjs.com/package/diff) create by RedactedRevolution
Use the service to generate an HTML of the the strings that are being compared.
APIs setConfig(Config) Takes in an argument of Config type and sets the config. Refer below for config type
getHTMLForDiff(data1: string, data2: string, config?: Config): StringDom Accepts 2 strings and a config. If config is sent here it will override the config that/if you have set via setConfig Returns an output of the type StringDom.(Refer below)
Types Config { domStyleType: DOMStyleType; diffType: DiffType; classOne?: string; classTwo?: string; emptyStringNotifier?: string; ignoreCase?: boolean; }
domStyleType - enum DOMStyleType {
Bold,
Italics,
Class
}
Bold - denotes diffs with <strong> tag
Italics - denotes diffs with <em> tag
Class - denotes diffs with <span> tag with approriate class that is sent
Note :- You will have to set the encapsulation property of your component to ViewEncapsulation.ShadowDom to reflect your css classes
diffType - enum DiffType { Chars, Words } Currently support only for char and word diff Chars - diff by character Words - diff by word
classOne - (optional) When DOMStyleType.Class , this will be added to string one
classTwo - (optional) When DOMStyleType.Class , this will be added to string two
emptyStringNotifier - (optional) Use if you want to denote an empty string with any other character
ignoreCase - (optional) Defaults to false
StringDom { string1: string; string2: string; }
Example In your component DOM: any; constructor(private ngxDiff: NgxJsDiffLibService) { }
ngOnInit() { }
getDOM(in1, in2) { this.DOM = this.ngxDiff.getHTMLForDiff(in1, in2, { diffType: DiffType.Words, domStyleType: DOMStyleType.Class, classOne: 'cr', classTwo: 'bl', emptyStringNotifier: '..', ignoreCase: true }); }
In your html `<div [innerHTML]="DOM.string1">
`Sample Input when using diff words String 1 : 'Winter is coming' String 2 : 'Winter is here'
Output String 1 : 'Winter is coming' String 2 : 'Winter is here'