ngx-text-diff
0.6.0 • Public • Published- A simple text diff
componentto be used with Angular and based ongoogle diff match patchlibrary.
- diff-match-patch : ^1.0.4
These packages will not be auto-installed and must be installed in addition to this library.
- @angular/common >= 6.0.0
- @angular/core >= 6.0.0
- @angular/forms >= 6.0.0
- @angular/cdk >= 6.0.0 (used for scrolling synchronization)
npm i ngx-text-diff
module: NgxTextDiffModulecomponent: NgxTextDiffComponentselector: td-ngx-text-diff
| Input | Type | Required | Description |
|---|---|---|---|
| left | string | Yes | First text to be compared |
| right | string | Yes | Second text to be compared |
| diffContent | Observable | Optional | DiffContent observable |
| format | DiffTableFormat | Optional, default:SideBySide | Possible values: - SideBySide- LineByLine |
| loading | boolean | Optional, default:false | Possible values: - true: shows an loading spinner.- false: hides the loading spinner |
| hideMatchingLines | boolean | Optional, default:false | Possible values: - true: Only shows lines with differences.- false: shows all lines |
| showToolbar | boolean | Optional, default:true | Possible values: - true: shows the toolbar.- false: hides the format toolbar |
| showBtnToolbar | boolean | Optional, default:true | Possible values: - true: shows the format toolbar.- false: hides the format toolbar |
| outerContainerClass | any | Optional | ngClass object for the outer div |
| outerContainerStyle | any | Optional | ngStyle object for the outer style |
| toolbarClass | any | Optional | ngClass object for the toolbar div |
| toolbarStyle | any | Optional | ngStyle object for the toolbar style |
| compareRowsClass | any | Optional | ngClass object for the div surrounding the table rows |
| compareRowsStyle | any | Optional | ngStyle object for the div surrounding the table rows |
| synchronizeScrolling | boolean | Optional, default:true | Possible values: - true: Scrolls both tables together.- false: Scrolls individually |
| Input | Type | Required | Description |
|---|---|---|---|
| compareResults | DiffResults | Optional | Event fired when comparison is executed |
exportinterfaceDiffContent{leftContent:string;rightContent:string;}exporttypeDiffTableFormat='SideBySide'|'LineByLine';exportinterfaceDiffResults{hasDiff:boolean;diffsCount:number;rowsWithDiff:{leftLineNumber?:number;rightLineNumber?:number;numDiffs:number;}[];}
- Register the
NgxTextDiffModulein a module, for example app module.
import{BrowserModule}from'@angular/platform-browser';import{NgModule}from'@angular/core';import{ScrollDispatchModule}from'@angular/cdk/scrolling';import{AppComponent}from'./app.component';import{NgxTextDiffModule}from'ngx-text-diff';@NgModule({declarations:[AppComponent],imports:[BrowserModule,ScrollDispatchModule,NgxTextDiffModule],providers:[],bootstrap:[AppComponent]})exportclassAppModule{}
import{Component,OnInit}from'@angular/core';import{DiffContent,DiffResults}from'ngx-text-diff/lib/ngx-text-diff.model';@Component({selector:'app-home',templateUrl:'./home.component.html',styleUrls:[]})exportclassHomeComponentimplementsOnInit{left=`some text to\nbe compared!`right=`A changed\n version \n of the text to\nbe compared!`constructor(){}ngOnInit(){}onCompareResults(diffResults:DiffResults){console.log('diffResults',diffResults);}}
<td-ngx-text-diff[left]="left"[right]="right"(compareResults)="onCompareResults($event)">
Runng build ngx-text-diff to build the library. The build artifacts will be stored in thedist/ngx-text-diff directory.
This project is based ongoogle diff match patch.
Package Sidebar
Install
npm i ngx-text-diff
Repository
Homepage
Weekly Downloads
4,530
Version
0.6.0
License
MIT
Unpacked Size
617 kB
Total Files
46