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

ngx-diff2html Demo

npm install --save ngx-diff2html

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>

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

Get text diff between text1 & text2 in unified format.

Returns:

• string diff

Convert unified diff string to HTML using diff2html.

Returns:

• string HTML diff

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);
  }

}

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

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

This project is licensed under the MIT license.