Ng-Diff-Match-Patch-Att
=======================

This is a port of the [angular-diff-match-patch](https://github.com/amweiss/angular-diff-match-patch) wrapper for AngularJS. 

## Dependencies
* [Angular](https://angular.io) (tested with 6.0.0)


## Installation

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

```shell
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:

~~~js
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

~~~html
<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:

~~~css
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](https://github.com/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.