Skip to content

Commit ec47df3

Browse files
committed
Update README.md
1 parent f08b0eb commit ec47df3

File tree

1 file changed

+60
-13
lines changed

1 file changed

+60
-13
lines changed

README.md

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,74 @@
11
# NgxDiff2html
22

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).
44

5-
## Development server
5+
## Demo
66

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](#)
88

9-
## Code scaffolding
9+
## Installation
1010

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+
```
1214

13-
## Build
15+
## API
1416

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`
1620

17-
## Running unit tests
21+
### Inputs
1822

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`
2030

21-
## Running end-to-end tests
31+
### Outputs
2232

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)
2436

25-
## Further help
37+
## Usage
2638

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

Comments
 (0)