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:

  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:

  /* 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:

  // 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:

<ngx-diff2html
  left="some text"
  right="some other text"
></ngx-diff2html>

API

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

Inputs

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
showContext	boolean	Optional, default: false	Enable to show context lines

Outputs

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

Methods

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:

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

@Component({
  selector: 'app-root',
  template: `<div [innerHtml]="diffHTML"></div>`,
  styles: [],
  providers: [
    NgxDiff2htmlService
  ]
})
export class AppComponent {

  diffHTML: string = null;

  constructor(private diffService: NgxDiff2htmlService) {
    const diff = this.diffService.getDiff('first text', 'second text');
    this.diffHTML = this.diffService.diffToHTML(diff);
  }

}

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.