https://github.com/saurabh47/ngx-object-diff

An Angular 2+ library to compare and show object differences. Demo->
https://github.com/saurabh47/ngx-object-diff

angular angular2 diff hacktoberfest object-diff

Last synced: 6 months ago
JSON representation

An Angular 2+ library to compare and show object differences. Demo->

• Host: GitHub
• URL: https://github.com/saurabh47/ngx-object-diff
• Owner: saurabh47
• License: mit
• Created: 2020-05-16T09:02:22.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-06-05T17:10:32.000Z (over 2 years ago)
• Last Synced: 2025-07-07T05:59:04.281Z (7 months ago)
• Topics: angular, angular2, diff, hacktoberfest, object-diff
• Language: TypeScript
• Homepage: https://saurabh.gangamwar.com/ngx-object-diff/
• Size: 4.89 MB
• Stars: 10
• Watchers: 2
• Forks: 4
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# NgxObjectDiff  

[![Known Vulnerabilities](https://snyk.io/test/github/saurabh47/ngx-object-diff/badge.svg?targetFile=projects/ngx-object-diff/package.json)](https://snyk.io/test/github/saurabh47/ngx-object-diff?targetFile=projects/ngx-object-diff/package.json) [![GitHub license](https://img.shields.io/github/license/saurabh47/ngx-object-diff)](https://github.com/saurabh47/ngx-object-diff/blob/master/LICENSE) [![GitHub issues](https://img.shields.io/github/issues/saurabh47/ngx-object-diff)](https://github.com/saurabh47/ngx-object-diff/issues)

#### An Angular 2+ library to compare and show object differences.

[Demo]( https://saurabh47.github.io/ngx-object-diff/)

![Screenshot](https://raw.githubusercontent.com/saurabh47/ngx-object-diff/master/screenshot.png)

## Installation

```

npm i ngx-object-diff

```

# Available methods on `NgxObjectDiff` service

`setOpenChar`: set the opening character for the view, default is `{`

`setCloseChar`: set the closing character for the view, default is `}`

`diff`: compare and build all the difference of two objects including prototype properties

`diffOwnProperties`: compare and build the difference of two objects taking only its own properties into account

`toJsonView`: format a diff object to a full JSON formatted object view

`toJsonDiffView`: format a diff object to a JSON formatted view with only changes

`objToJsonView`: format any javascript object to a JSON formatted view

# Usage

### Import the NgxObjectDiffModule

```

import { NgxObjectDiffModule } from 'ngx-object-diff';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    NgxObjectDiffModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

### Inject the service

```

  constructor(private objectDiff: NgxObjectDiffService) { }

  ngOnInit(): void {

    // This is required only if you want to show a JSON formatted view of your object

    this.object1View = this.objectDiff.objToJsonView(this.object1);

    this.object2View = this.objectDiff.objToJsonView(this.object2);

    

    // you can directly diff your objects js now or parse a Json to object and diff

    let diff = this.objectDiff.diff(this.object1, this.object2);

    // you can directly diff your objects including prototype properties and inherited properties using `diff` method

    let diffAll = ObjectDiff.diff($scope.yourObjectOne, $scope.yourObjectTwo);    

    // gives a full object view with Diff highlighted

    this.diffView = this.objectDiff.toJsonView(diff)

    // gives object view with only Diff highlighted

    this.diffValueChanges = ObjectDiff.toJsonDiffView(diff);

  }

```

### Component

Bind the variables to ```ngx-object-diff``` Component.It will takes care of styling.

```

   

   

   

   

```

### Alternate approach

Bind the variables directly in your html using the `innerHTML` property binding of Angular

Use a `
` element for better results

```html

      


      


      


      


```


Based on https://github.com/hipster-labs/angular-object-diff