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.5

Required Packages

These packages will not be auto-installed and must be installed in addition to this library.
- @angular/common >= 20.0.0
- @angular/core >= 20.0.0
- @angular/forms >= 20.0.0
- @angular/cdk >= 20.0.0 (used for scrolling synchronization)

Demo

Ngx Text Diff Demo

Installation

npm i @winarg/ngx-text-diff

API

module: NgxTextDiffModule
component: NgxTextDiffComponent
selector: td-ngx-text-diff

$3

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

$3

| Input | Type | Required | Description |
| -------------- | ----------- | -------- | --------------------------------------- |
| compareResults | DiffResults | Optional | Event fired when comparison is executed |

$3

`` typescript
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

1. Register the NgxTextDiffModule in a module, for example app module.
` typescript
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 {}
`

` typescript
import { Component, OnInit } from '@angular/core';
import { DiffContent, DiffResults } from '@winarg/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);
}
}

`

` html
[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.