| 
1 | 1 | # NgxDiff2html  | 
2 | 2 | 
 
  | 
3 |  | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.24.  | 
 | 3 | +A simple text diff component for Angular, based on [diff-match-patch](https://github.com/google/diff-match-patch) & [diff2html](https://github.com/rtfpessoa/diff2html).  | 
4 | 4 | 
 
  | 
5 |  | -## Development server  | 
 | 5 | +## Demo  | 
6 | 6 | 
 
  | 
7 |  | -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.  | 
 | 7 | +[ngx-diff2html Demo](#)  | 
8 | 8 | 
 
  | 
9 |  | -## Code scaffolding  | 
 | 9 | +## Installation  | 
10 | 10 | 
 
  | 
11 |  | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.  | 
 | 11 | +```  | 
 | 12 | +npm install --save ngx-diff2html  | 
 | 13 | +```  | 
12 | 14 | 
 
  | 
13 |  | -## Build  | 
 | 15 | +## API  | 
14 | 16 | 
 
  | 
15 |  | -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.  | 
 | 17 | +- module: `NgxDiff2htmlModule`  | 
 | 18 | +- component: `NgxDiff2htmlComponent`  | 
 | 19 | +- selector: `ngx-diff2html`  | 
16 | 20 | 
 
  | 
17 |  | -## Running unit tests  | 
 | 21 | +### Inputs  | 
18 | 22 | 
 
  | 
19 |  | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).  | 
 | 23 | +| Input                | Type              | Required                             | Description  | 
 | 24 | +| -------------------- | ----------------- | ------------------------------------ | --------------------------  | 
 | 25 | +| left                 | string            | Yes                                  | First text to be compared  | 
 | 26 | +| right                | string            | Yes                                  | Second text to be compared  | 
 | 27 | +| filename             | string            | Optional, default: ` ` (white space) | Can be used to display a filename in the top of diff results. **Cannot be null or empty**  | 
 | 28 | +| format               | `DiffFormat`      | Optional, default: `side-by-side`    | Possible values:<br> -`side-by-side`<br> -`line-by-line`  | 
 | 29 | +| style                | `DiffStyle`       | Optional, default: `word`            | Possible values:<br> -`word`<br> -`char`  | 
20 | 30 | 
 
  | 
21 |  | -## Running end-to-end tests  | 
 | 31 | +### Outputs  | 
22 | 32 | 
 
  | 
23 |  | -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).  | 
 | 33 | +| Output               | Type              | Required                             | Description  | 
 | 34 | +| -------------------- | ----------------- | ------------------------------------ | --------------------------  | 
 | 35 | +| diffChange           | string            | Optional                             | Event fired when diff changes. The returned value is the diff in [unified format](http://fileformats.archiveteam.org/wiki/Unified_diff)  | 
24 | 36 | 
 
  | 
25 |  | -## Further help  | 
 | 37 | +## Usage  | 
26 | 38 | 
 
  | 
27 |  | -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).  | 
 | 39 | +1) Register the `NgxDiff2htmlModule` in a module, for example app module:  | 
 | 40 | + | 
 | 41 | +```diff  | 
 | 42 | +  import { BrowserModule } from '@angular/platform-browser';  | 
 | 43 | +  import { NgModule } from '@angular/core';  | 
 | 44 | + | 
 | 45 | +  import { AppComponent } from './app.component';  | 
 | 46 | ++ import { NgxDiff2htmlModule } from 'ngx-diff2html';  | 
 | 47 | + | 
 | 48 | +  @NgModule({  | 
 | 49 | +    declarations: [AppComponent],  | 
 | 50 | +    imports: [  | 
 | 51 | +      BrowserModule,  | 
 | 52 | ++     NgxDiff2htmlModule  | 
 | 53 | +    ],  | 
 | 54 | +    providers: [],  | 
 | 55 | +    bootstrap: [AppComponent]  | 
 | 56 | +  })  | 
 | 57 | +  export class AppModule {}  | 
 | 58 | +```  | 
 | 59 | + | 
 | 60 | +2) Add the following line to `polyfills.ts`:  | 
 | 61 | + | 
 | 62 | +```diff  | 
 | 63 | +  // Add global to window, assigning the value of window itself.  | 
 | 64 | ++ (window as any).global = window;  | 
 | 65 | +```  | 
 | 66 | + | 
 | 67 | +3) Start using the component:  | 
 | 68 | + | 
 | 69 | +```  | 
 | 70 | +<ngx-diff2html  | 
 | 71 | +  left="some text"  | 
 | 72 | +  right="some other text"  | 
 | 73 | +/>  | 
 | 74 | +```  | 
0 commit comments