Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ng-diff-match-patch with all npm packages installed. Try it out:

require("@angular/core/package.json"); // @angular/core is a peer dependency. var ngDiffMatchPatch = require("ng-diff-match-patch")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng-diff-match-patch v2.0.6

A Diff-Match-Patch component for your Angular 2 + applications


Build Status

This is a port of the angular-diff-match-patch wrapper for AngularJS.


npm install ng-diff-match-patch --save-dev


In order to use these directives you'll first have to import them from the module like so:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// import our necessary module and components here 
import { DiffMatchPatchModule } from 'ng-diff-match-patch';

  declarations: [
  imports: [
  providers: [  ],
  bootstrap: [AppComponent]
export class AppModule { }

Remember to add DiffMatchPatchModule to your imports array in @NgModule

Basic Usage



<pre diff [left]="left" [right]="right"></pre>

<pre lineDiff [left]="left" [right]="right"></pre>

<pre semanticDiff [left]="left" [right]="right"></pre>

<pre processingDiff [left]="left" [right]="right"></pre>

This should produce something like so:


CSS Styles:

  color: black;
  background: #bbffbb;

  color: black;
  background: #ffbbbb;

Pull Requests

Got any improvements you'd like to make to this module? Submit a pull request and I will review and merge.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free