@miccou/ngx-text-diff
v17.0.1
Published
A Text Diff component for Angular.
Downloads
91
Readme
ngx-text-diff
- A simple text diff
component
to be used with Angular and based ongoogle diff match patch
library.
Dependencies
- diff-match-patch: ^1.0.5
- tslib: ^2.0.0
Required Packages
These packages will not be auto-installed and must be installed in addition to this library.
- @angular/common >= 17.0.0
- @angular/core >= 17.0.0
- @angular/forms >= 17.0.0
- @angular/cdk >= 16.0.0 or >= 17.0.0 (used for scrolling synchronization) (supports 16 and 17 to support people using @angular/material@16 for legacy components)
Demo
Installation
npm i @miccou/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 '@miccou/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 '@miccou/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.
Thanks to the original author Alfredo Benassi and most recent maintainer Anargyros Roussos for their work on this project.