@memberjunction/ng-deep-diff

Angular component for visualizing deep object differences using the non-visual DeepDiffer functionality from @memberjunction/global. Provides both an inline comparison view and a dialog wrapper.

Overview

The @memberjunction/ng-deep-diff package renders a hierarchical diff of two JavaScript objects, highlighting additions, removals, and modifications. It supports expandable tree navigation, change type filtering, text search, copy-to-clipboard, and JSON export. A dialog variant wraps the inline component for modal use.

graph TD
    A[DeepDiffModule] --> B[DeepDiffComponent]
    A --> C[DeepDiffDialogComponent]

    B --> D["Diff Computation
    (DeepDiffer from @memberjunction/global)"]
    B --> E["Tree Display"]
    B --> F["Filter & Search"]
    B --> G["Export & Copy"]

    E --> E1["Added (green)"]
    E --> E2["Removed (red)"]
    E --> E3["Modified (blue)"]
    E --> E4["Unchanged (gray)"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff
    style D fill:#b8762f,stroke:#8a5722,color:#fff

Installation

npm install @memberjunction/ng-deep-diff

Usage

Import the Module

import { DeepDiffModule } from '@memberjunction/ng-deep-diff';

@NgModule({
  imports: [
    DeepDiffModule,
    // ... other imports
  ]
})
export class YourModule { }

Basic Component Usage

<mj-deep-diff
  [oldValue]="originalData"
  [newValue]="modifiedData"
  [title]="'Data Comparison'"
  [showSummary]="true"
  [showUnchanged]="false">
</mj-deep-diff>

Dialog Usage

<mj-deep-diff-dialog
  [(visible)]="showDiffDialog"
  [oldValue]="originalData"
  [newValue]="modifiedData"
  [title]="'Compare Changes'"
  [width]="'90%'"
  [height]="'80vh'">
</mj-deep-diff-dialog>

Component Properties

DeepDiffComponent

Property	Type	Default	Description
oldValue	Record<string, unknown>	-	The original value to compare
newValue	Record<string, unknown>	-	The new value to compare against
title	string	'Deep Diff Analysis'	Title displayed in the header
showSummary	boolean	true	Whether to show summary statistics
showUnchanged	boolean	false	Whether to show unchanged properties
expandAll	boolean	false	Whether to expand all nodes by default
maxDepth	number	10	Maximum depth to traverse in nested objects
maxStringLength	number	100	Maximum string length before truncation
truncateValues	boolean	true	Whether to truncate long values
treatNullAsUndefined	boolean	false	Whether to treat null values as equivalent to undefined

DeepDiffDialogComponent

All properties from DeepDiffComponent, plus:

Property	Type	Default	Description
visible	boolean	false	Controls dialog visibility
width	string	'80%'	Dialog width
height	string	'80vh'	Dialog height

Features

• Hierarchical Display: Nested objects and arrays are displayed in an expandable tree structure
• Change Type Filtering: Filter by added, removed, modified, or unchanged items
• Text Search: Search through paths and descriptions
• Copy Functionality: Copy paths and values to clipboard
• Export: Export diff results as JSON
• Responsive Design: Works on desktop and mobile devices
• Performance: Handles large objects with configurable depth limits
• Null Handling: Optional treatment of null as undefined for API compatibility

Examples

Basic Comparison

export class MyComponent {
  originalData = {
    name: 'John Doe',
    age: 30,
    email: 'john@example.com'
  };

  modifiedData = {
    name: 'John Doe',
    age: 31,
    email: 'john.doe@example.com',
    phone: '+1234567890'
  };
}

<mj-deep-diff
  [oldValue]="originalData"
  [newValue]="modifiedData">
</mj-deep-diff>

API Response Comparison with Null Handling

export class ApiComponent {
  apiResponse1 = {
    id: 123,
    name: null,
    description: 'Product',
    price: 99.99
  };

  apiResponse2 = {
    id: 123,
    name: 'Updated Product',
    description: null,
    price: 89.99
  };
}

<mj-deep-diff
  [oldValue]="apiResponse1"
  [newValue]="apiResponse2"
  [treatNullAsUndefined]="true"
  [showSummary]="true">
</mj-deep-diff>

Dialog with Custom Configuration

export class ConfigComponent {
  showComparison = false;

  compareVersions() {
    this.showComparison = true;
  }
}

<button (click)="compareVersions()">Compare Versions</button>

<mj-deep-diff-dialog
  [(visible)]="showComparison"
  [oldValue]="version1"
  [newValue]="version2"
  [title]="'Version Comparison'"
  [expandAll]="true"
  [maxDepth]="5"
  [width]="'95%'"
  [height]="'90vh'">
</mj-deep-diff-dialog>

Styling

The component uses CSS classes that can be customized:

• .diff-added — Added items (green)
• .diff-removed — Removed items (red)
• .diff-modified — Modified items (blue)
• .diff-unchanged — Unchanged items (gray)

Dependencies

Package	Description
@memberjunction/global	Provides the core DeepDiffer functionality
@angular/common	Angular common module
@angular/core	Angular core framework

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x

Build

cd packages/Angular/Generic/deep-diff
npm run build

License

ISC