ngx-text-diff
- A simple text diff
component
to be used with Angular and based on google diff match patch
library.
Dependencies
- diff-match-patch : ^1.0.4
Required Packages
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)
Demo
Ngx Text Diff Demo
Installation
npm i ngx-text-diff
API
module: NgxTextDiffModule
component: NgxTextDiffComponent
selector: td-ngx-text-diff
Inputs
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 |
Output
Input | Type | Required | Description |
---|
compareResults | DiffResults | Optional | Event fired when comparison is executed |
Custom Objects
export interface DiffContent {
leftContent: string;
rightContent: string;
}
export type DiffTableFormat = 'SideBySide' | 'LineByLine';
export interface DiffResults {
hasDiff: boolean;
diffsCount: number;
rowsWithDiff: {
leftLineNumber?: number;
rightLineNumber?: number;
numDiffs: number;
}[];
}
Usage
- Register the
NgxTextDiffModule
in 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]
})
export class AppModule {}
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: []
})
export class HomeComponent implements OnInit {
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)"
>
Build the NgxTextDiff module
Run ng build ngx-text-diff
to build the library. The build artifacts will be stored in the dist/ngx-text-diff
directory.
Credits
This project is based on google diff match patch.