KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

ngx-text-diff

★ 48 Open GitHub ↗

A Text Diff component for Angular

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://ngx-text-diff.herokuapp.com/home)

## 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
``` 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 '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
<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](https://github.com/google/diff-match-patch).

ngx-text-diff

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README