ngx-diff-lib v0.0.3

NgxJsDiffLib

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'