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
77A 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