Angular component library for displaying diffs of text. Demo.

1. Install ngx-diff modules from npm:

   npm install ngx-diff diff-match-patch-ts --save
   

2. Import NgxDiffModule to your app:

   import { NgxDiffModule } from 'ngx-diff';
   
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, NgxDiffModule],
     providers: [],
     bootstrap: [AppComponent],
   })
   export class AppModule {}

3. Use the inline-diff component by setting the oldText and newText attributes:

   <inline-diff [oldText]="oldDocumentContents" [newText]="newDocumentContents" [lineContextSize]="4"></inline-diff>

For version 3+, you can customise the appearance of the diff through various CSS variable settings. For example, in your styles.scss file, define:

:root .my-custom-ngx-diff-theme {
  --ngx-diff-border-color: #888888;
  --ngx-diff-font-size: 1rem;
  --ngx-diff-font-family: Consolas, Courier, monospace;
  --ngx-diff-font-color: #000000;
  --ngx-diff-line-number-font-color: #484848;
  --ngx-diff-line-number-hover-font-color: #ffffff;
  --ngx-diff-selected-border-color: #ff8000;
  --ngx-diff-inserted-background-color: #9dff97;
  --ngx-diff-deleted-background-color: #ff8c8c;
  --ngx-diff-equal-background-color: #ffffff;
  --ngx-diff-margin-background-color: #dedede;
  --ngx-diff-line-number-width: 2rem;
  --ngx-diff-border-width: 1px;
  --ngx-diff-line-left-padding: 1rem;
  --ngx-diff-bottom-spacer-height: 1rem;
}

Then use this class in your desired component in your HTML template:

<inline-diff
    class="my-custom-ngx-diff-theme"
    [oldText]="oldText"
    [newText]="newText"
    [lineContextSize]="4"
    style="width: 100%"
    (selectedLineChange)="selectedLineChange($event)"></inline-diff>

It is recommended to use these settings rather than attempt to override styles based upon DOM structure or class names that are internal details that may change.

If you have a feature or improvement you would like to see included, please raise an issue or a PR and I will review.

See the LICENSE file for license rights and limitations (MIT).