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

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.