Ng-Diff-Match-Patch-Att

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

Dependencies

• Angular (tested with 6.0.0)

Installation

After installing the above dependencies, install ng-diff-match-patch-att via:

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

Usage

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-att';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DiffMatchPatchModule
  ],
  providers: [  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Remember to add DiffMatchPatchModule to your imports array in @NgModule

Basic Usage

<h1>{{left}}</h1>
 
<h1>{{right}}</h1>
 
<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>

CSS Styles:

ins{
  color: black;
  background: #bbffbb;
}
 
del{
  color: black;
  background: #ffbbbb;
}

Credits

ng-diff-match-patch-att is an open-source project.

Special thanks to elliotforbes and their work with the Angular 2-4 module.

License

MIT

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.