Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@miccou/ngx-text-diff) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 ^14.0.0
@angular/core ^14.0.0
@angular/forms ^14.0.0
@angular/cdk ^14.0.0 (used for scrolling synchronization)

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

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 forked from the abandoned ngx-text-diff.

This project is based on google diff match patch.