NgxDiff2html


A simple text diff component for Angular, based on diff-match-patch & diff2html.

Demo

ngx-diff2html Demo

Installation

``
npm install --save ngx-diff2html
`

Usage

1. Register the NgxDiff2htmlModule in a module, for example app module:

`diff
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
+ import { NgxDiff2htmlModule } from 'ngx-diff2html';

@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
+ NgxDiff2htmlModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
`

2. Import diff2html css in styles.css:

`diff
/ You can add global styles to this file, and also import other style files /
+ @import "~diff2html/bundles/css/diff2html.min.css";
`

3. You may also need to add the following lines to polyfills.ts:

`diff
// Add global to window, assigning the value of window itself.
+ (window as any).global = window;
+ (window as any).process = { env: { DEBUG: undefined } };
`

4. Start using the component:

`html
left="some text"
right="some other text"
>
`

API

- module: NgxDiff2htmlModule
- service: NgxDiff2htmlService
- component: NgxDiff2htmlComponent
- selector: ngx-diff2html

$3

| Input | Type | Required | Description
| -------------------- | ----------------- | ------------------------------------ | --------------------------
| left | string | Yes | First text to be compared
| right | string | Yes | Second text to be compared
| filename | string | Optional, default: '' (empty) | Can be used to display a filename at the top of diff results
| format | DiffFormat | Optional, default: side-by-side | Possible values:
- side-by-side
- line-by-line
| style | DiffStyle | Optional, default: word | Possible values:
- word
- char

$3

| Output | Type | Required | Description
| -------------------- | ----------------- | ------------------------------------ | --------------------------
| diffChange | string | Optional | Event fired when diff changes. Returns text diff in unified format

$3

#### NgxDiff2htmlService.getDiff(text1, text2, filename)

Get text diff between text1 & text2 in unified format.

Returns:
- string diff

#### NgxDiff2htmlService.diffToHTML(diff, format, style)

Convert unified diff string to HTML using diff2html.

Returns:
- string HTML diff

#### Example:

`typescript
import { Component } from '@angular/core';
import { NgxDiff2htmlService } from 'ngx-diff2html';

@Component({
selector: 'app-root',
template:

}
`

Build

Run ng build ngx-diff2html to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build ngx-diff2html, go to the dist folder cd dist/ngx-diff2html and run npm publish`.

License

This project is licensed under the MIT license.