abenassi87 / ngx-text-diff

A Text Diff component for Angular

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

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.

ngx-text-diff's Issues

Compare result may change lines ordering?

Hello,

We are using ngx-text-diff in an Angular app and we encountered an issue with the order of the comparison results.

For example, if we have these 5 lines in the left content:

- name: DDD
- name: CCC
- name: BBB
- name: AAA
- name: EEE

And these 5 lines in the right content:

- name: EEE
- name: DDD
- name: AAA
- name: BBB
- name: CCC

The compare result in the right side is:

- name: EEE
- name: DDD
- name: AAA
- name: CCC
- name: BBB

For some unknown reason it inverts the lines BBB and CCC..

Is there a way to fix this problem quickly?

Thanks

Add @Output() to provide comparison data in case user wants it

It might be helpful for some users to know the details of the comparison instead of just the UI output. For example, what if I want to know how many characters or lines were mismatched, or if there was a mismatch at all?

What data would possibly be available to a user?

Improve way observable works

I think the usage of the observable is confusing.

• Why do I have to pass in left and right AND an observable? I should have the option to just pass in an observable or just left/right
• I think that the properties on the observable should be consistent with the other properties (e.x. rename leftContent to left)
• Is the observable the only way to get a render update if the data changes? If so, this should be called out in the documentation.
  • Also, it might be useful for me to just update the @Input() and if left or right changes, then it should trigger a re-comparison (e.x. listen to ngOnChanges())

Add better usage examples to the README

The readme could use some overall cleanup, but it should absolutely include some example usage and screenshots of the output. Right now, the only usage shows how to import the module, but not how to use the actual component.

Very weird results after removing one "," from sentence.

Hello! Hope you're doing well.

I found a strange behavior while using your demo page when comparing two sentences.
I removed just one comma from the text and instead of highlighting just this comma I got a bunch of other highlights.

You can try it yourself.

Here is the text for "Left Content":
Normal text: In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.

And here is the text for "Right Content":
Normal text: In the process of internal desktop applications development many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.

Copying text copies line numbers as well.

Is there anyway to prevent the '+' and line number from being copied ?

Open selector in readme. Caused issue while implementation. Needs to be closed in order to work properly.

---

Name: Bug report

Describe the bug
The readme contains incomplete selector

Current behavior

<td-ngx-text-diff
  [left]="left"
  [right]="right"
  (compareResults)="onCompareResults($event)"
>

Expected behavior

<td-ngx-text-diff
  [left]="left"
  [right]="right"
  (compareResults)="onCompareResults($event)"
></td-ngx-text-diff>

Additional context

• Issue noted in Angular 10.
• Issue seem to be fixed once the selector closed.
• Let me know the suggestions to improve bug reporting if i am missing something.

Add word wrap along with vertical bar

Is it possible to have option of word wrapping for long text along with vertical scroll bar?

Add Webworker support

Scroll between differences

Can we add two buttons Previous / Next to the toolbar which would allow user to navigate between differences?

The same way like the WinMerge does. Clicking Previous button will navigate user to previous difference, clicking Next will navigate to the next difference.

We can make these buttons with position: absolute so they're always visible when user is scrolling through the comparison. When user clicks Next it will scroll to the next change that is not in viewport, clicking Previous scrolls to the previous change that is not in the viewport.

Version 0.6.0 no longer works for Angular 6 or 7

node_modules/ngx-text-diff/lib/ngx-text-diff.component.d.ts(20,9): error TS1086: An accessor cannot be declared in an ambient context.
node_modules/ngx-text-diff/lib/ngx-text-diff.component.d.ts(21,9): error TS1086: An accessor cannot be declared in an ambient context.

I was hoping ngx-text-diff would work with Angular >= 6.

npm ERR! Invalid tag name "^>=6.0.0": Tags may not have any characters that encodeURIComponent encodes

I am getting this error npm ERR! Invalid tag name "^>=6.0.0": Tags may not have any characters that encodeURIComponent encodes in Angular 15 version. I do not want to use --legacy-peer-deps to solve this. I am using both dependencies with latest version
"diff-match-patch": "^1.0.5",
"ngx-text-diff": "^0.6.0"

Remove references to "Angular 6"

Using a version number anywhere in the documentation means that it is likely to quickly become outdated as new versions of Angular are released. The real distinction is Angular or AngularJS.

I think that the term Angular is prevalent enough now that it is probably ok to assume that users will know enough to make the distinction of any versions.

typeof diff_match_patch issue

I installed with npm i ngx-text-diff --legacy-peer-deps and "diff-match-patch": "^1.0.4", I got an error when app build as:

Error: node_modules/ngx-text-diff/lib/ngx-text-diff.service.d.ts:5:17 - error TS2749: 'diff_match_patch' refers to a value, but is being used as a type here. Did you mean 'typeof diff_match_patch'?
diffParser: diff_match_patch;

Is that a version issue, I used Angular13.

Synchronize scrolling

When scrolling, it is a better user experience if both tables scroll together :)

Allow overridding CSS and allow user to pass in classes and or styles

1. We should probably export the CSS to an individual stylesheet and require the user to import it into their styles.css
   1. This would allow users to provide their own CSS instead and theme the components on their own.
   2. This will require ensuring that CSS classnames are very specific (e.x. no collisions with other class names from other libraries)
2. We should allow the user to pass in classes and or styles that would be applied to various components. I am not sure exactly which components we would want to allow this for, but I have one thought:
   1. Example: I want to have a margin between the two comparison sections

ngx-text-diff not working

I'm trying to check this library to include in my project, I have created a dummy project to check how this works, I installed every dependencies into my dummy project but it always throws an error as shown below

can any one help me in solving this error ?

Thanks!

Get rid of the unnecessary warnings related to peer dependencies

The latest 0.6.0 version with Angular 9 support, yields warnings while installing this package.

npm WARN [email protected] requires a peer of @angular/core@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/cdk@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of rxjs@~6.3.3 but none is installed. You must install peer dependencies yourself.

It can simply be avoided by updating the peer dependencies to >=9.0.0.

Update to Angular 7

ngx-text-diff slow when comparing files bigger than a few thousand lines

Thank you for such a useful component. The UI is very good, and its pretty performant until the files being compared are less than a few thousand lines.

Once the file size goes above 5000 lines, it starts taking on an average of 1 second per 1K lines. I have files of size 200K lines in my system, but then it takes almost 3-4 minutes to diff them. The bad part is that the browser freezes and user cannot even click on anything or cancel the diff operation. Same files take a few seconds to compare in Notepad++.

This can be easily reproduced by pasting a file of size 20K lines in the demo app at https://ngx-text-diff.herokuapp.com/home and clicking on "Compare" button.

Has anyone seen this issue? Is there any known workaround/fix? Any help/fix is appreciated.

License

Hello,
can you state which license the code of the library is based on?

Add loading spinner

Add a loader spinner while the comparison is in progress.

How to launch compare function programmaticaly ?

Hello,

I'm using this (awesome) tool in my angular school project.

But I need to call the compare function from the typescript side. Is that possible ?

My html code looks like this :

<div class="diffContainer">
  <td-ngx-text-diff left="{{this.initialText}}" right="{{this.changedText}}"></td-ngx-text-diff>
</div>

Problem is that the "changedText" won't update whenever I'm modifying it. I would like to 'refresh' the component every time a change is made to the "changedText".

Do you have an idea of how to achieve that ?

Add highlight to differences

Examples:

`hideMatchingLines` attribute doesn't work

When passing hideMatchingLines=true, the unmatched lines still show.

Example

<td-ngx-text-diff [left]="leftText" [right]="rightText" [hideMatchingLines]="true"></td-ngx-text-diff>

Cause

The @Input() should be on the setter, not the getter.

@Input()
get hideMatchingLines() {
  return this._hideMatchingLines;
}

set hideMatchingLines(hide: boolean) {
  this.hideMatchingLinesChanged(hide);
}

Solution

Move the @Input() to the setter.

get hideMatchingLines() {
  return this._hideMatchingLines;
}

@Input()
set hideMatchingLines(hide: boolean) {
  this.hideMatchingLinesChanged(hide);
}

Line numbers are incorrect

@ABenassi87 - it looks like the line numbers are not being calculated accurately.

Guess of problem:
It seems like you remove all blank lines which makes it so the line numbers do not match up with the original. I would recommend to keep the blank lines if possible, or at least make sure the line number count honors them, even if the line numbers the user sees are not contiguous.

Project 'ngx-text-diff' does not support the 'build' target.

Hi guys,
I need your help with this issue.
I am getting Project 'ngx-text-diff' does not support the 'build' target. when I try to build the library.
Does anyone have any idea what could it be?
Thanks in advance.

Make line numbers sticky when scrolling

It would be useful if the line numbers were sticky and only the content within scrolled

Is this lib Angular 8 or 9 compatible?

Refactor table code

Refactor table code to add components and cdk/table.

Toolbar text dynamically.

Hi,
I got a problem when try to use another language for toolbars and toolbars button.
Is there a way to change text of toolbar and toolbar buttons dynamically?
Thank you a lot.

npm ERR! Invalid tag name "^>=6.0.0": Tags may not have any characters that encodeURIComponent encodes

Hi, first of all, thank you for the library. Very helpful..

Lastly, I got the error above when I do npm install, it occurred in npm v 7.5.2.
However, With npm version 6.14.11 I just see warnings only and there are no errors at all.

You can see below the char that cause this issue --> ^.
Can you remove it please?

npm WARN [email protected] requires a peer of @angular/core@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/forms@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of @angular/cdk@^>=6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of rxjs@~6.3.3 but none is installed. You must install peer dependencies yourself.

BTW, I'm using angular core 9.0.3 and its still show me this warnings...

Customize "Show line with diffs only"

Hey, it's my second post here.

Still using that really cool tool :)

About the "Show line with diffs only" feature, would it be possible to make it show (in neutral color) the 3 previous lines and the 3 following lines of where the diff is located ?

This would help in putting more context when using that feature.

I can't really tell if it's easy to achieve or not.

Any insights or idea on that would be great!

Thanks for your help!

Module not found: Error: Can't resolve 'ngx-text-diff/lib/ngx-text-diff.model'

I am getting this issue while loading
Error: ./src/app/modules/shared/shared-components/step-details/step-details.component.ts
Module not found: Error: Can't resolve 'ngx-text-diff/lib/ngx-text-diff.model' in '/home/codemantra/Documents/bhargh@va/learning/angular/bdd360_Full/stepdef/github/bdd360-springboot/UI/src/app/modules/shared/shared-components/step-details'

import { DiffContent, DiffResults } from 'ngx-text-diff/lib/ngx-text-diff.model';
in the component.
I am currently using
"@angular/common": "^11.2.6",
"@angular/forms": "^11.2.6",
"@angular/core": "^11.2.6",
"@angular/cdk": "^11.2.5",

Possible Typo

Should this second if line be if (result.rightContent)?

    if (result.leftContent) {
      diffCount += result.leftContent.lineDiffs.filter(diff => diff.isDiff).length;
    }
    if (result.leftContent) {
      diffCount += result.rightContent.lineDiffs.filter(diff => diff.isDiff).length;
    }

ngx-text-diff/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts

Line 182 in 34fa1d9

if (result.leftContent) {

Angular 10 Ivy

This likely means that the library (ngx-text-diff/lib/ngx-text-diff.module) which declares NgxTextDiffModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy

hideMatchingLines

ngx-text-diff/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts

Lines 34 to 41 in 52a678b

	@Input()
	get hideMatchingLines() {
	return this._hideMatchingLines;
	}
	set hideMatchingLines(hide: boolean) {
	this.hideMatchingLinesChanged(hide);
	}

Aren't they miss-matched?

Add header with way to get back to github from heroku app

The heroky example should include a header with a way to get back to the github repo.

Create and publish npm package

Some information:
https://medium.com/@esanjiv/complete-beginner-guide-to-publish-an-angular-library-to-npm-d42343801660

Package "ngx-text-diff" has an incompatible peer dependency to "rxjs" (requires "~6.3.3", would install "6.6.3").

Trying to upgrade to Angular 8 fails with

Package "ngx-text-diff" has an incompatible peer dependency to "rxjs" (requires "~6.3.3", would install "6.6.3").

Any plan to upgrade to latest angular?

hey, is there any plan upgrade this package to Angular 12? If not, can we create a pr to do it?

Do we have a version compatible with Ivy?

After upgrade to Angular 16 it is not working...Do we have a compatibility with Ivy?