@stelmukhov/ngx-text-diff v0.6.4

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 >= 12
• @angular/core >= 12
• @angular/forms >= 12
• @angular/cdk >= 12 (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

Output

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

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