Skip to content

Commit 2158a85

Browse files
committed
Update README.md
1 parent 73d2127 commit 2158a85

File tree

1 file changed

+48
-3
lines changed

1 file changed

+48
-3
lines changed

README.md

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# NgxDiff2html
22

33
[![NPM version](https://img.shields.io/npm/v/ngx-diff2html)](https://www.npmjs.com/package/ngx-diff2html)
4-
[![Downloads](https://img.shields.io/npm/dt/ngx-diff2html)](https://npmjs.org/package/ngx-diff2html)
4+
[![Downloads](https://img.shields.io/npm/dt/ngx-diff2html)](https://www.npmjs.com/package/ngx-diff2html)
55
[![License](https://img.shields.io/npm/l/ngx-diff2html)](LICENSE)
66

77
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).
@@ -66,6 +66,7 @@ npm install --save ngx-diff2html
6666
## API
6767

6868
- module: `NgxDiff2htmlModule`
69+
- service: `NgxDiff2htmlService`
6970
- component: `NgxDiff2htmlComponent`
7071
- selector: `ngx-diff2html`
7172

@@ -75,15 +76,59 @@ npm install --save ngx-diff2html
7576
| -------------------- | ----------------- | ------------------------------------ | --------------------------
7677
| left | string | Yes | First text to be compared
7778
| right | string | Yes | Second text to be compared
78-
| filename | string | Optional, default: `` (empty) | Can be used to display a filename at the top of diff results.
79+
| filename | string | Optional, default: ` ` (empty) | Can be used to display a filename at the top of diff results
7980
| format | `DiffFormat` | Optional, default: `side-by-side` | Possible values:<br> - `side-by-side`<br> - `line-by-line`
8081
| style | `DiffStyle` | Optional, default: `word` | Possible values:<br> - `word`<br> - `char`
8182

8283
### Outputs
8384

8485
| Output | Type | Required | Description
8586
| -------------------- | ----------------- | ------------------------------------ | --------------------------
86-
| diffChange | string | Optional | Event fired when diff changes. The returned value is the text diff in [unified format](http://fileformats.archiveteam.org/wiki/Unified_diff)
87+
| diffChange | string | Optional | Event fired when diff changes. Returns text diff in [unified format](http://fileformats.archiveteam.org/wiki/Unified_diff)
88+
89+
### Methods
90+
91+
#### `NgxDiff2htmlService.getDiff(text1, text2, filename)`
92+
93+
Get text diff between `text1` & `text2` in [unified format](http://fileformats.archiveteam.org/wiki/Unified_diff).
94+
95+
Returns:
96+
- `string` diff
97+
98+
#### `NgxDiff2htmlService.diffToHTML(diff, format, style)`
99+
100+
Convert unified diff string to HTML using diff2html.
101+
102+
Returns:
103+
- `string` HTML diff
104+
105+
#### Example:
106+
107+
```typescript
108+
import { Component } from '@angular/core';
109+
import { NgxDiff2htmlService } from 'ngx-diff2html';
110+
111+
@Component({
112+
selector: 'app-root',
113+
template: `
114+
<div [innerHtml]="diffHTML"></div>
115+
`,
116+
styles: [],
117+
providers: [
118+
NgxDiff2htmlService
119+
]
120+
})
121+
export class AppComponent {
122+
123+
diffHTML: string = null;
124+
125+
constructor(private diffService: NgxDiff2htmlService) {
126+
const diff = this.diffService.getDiff('first text', 'second text');
127+
this.diffHTML = this.diffService.diffToHTML(diff);
128+
}
129+
130+
}
131+
```
87132

88133
## Build
89134

0 commit comments

Comments
 (0)