compare two objects without object reference Angular 10

I want to compare two object to see if they are equal. Object A (offer) is the original object and object B (offerTemp) is an copy of A.

Object A is displayed in an table of the component, to see if there are any changes made in the table I want to compare A to B. But when I call the function to check if they are equal it says the objects aren't equal. I think this is because object A has a reference of the object and B has not (at least that is what I see when I log both objects in the console).

Object A (offer) (from console):

Offer {id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

Object B (offerTemp) (from console):

{id: 1834, title: "A great article offer - 1834", description: "browser", sellDate: Mon Dec 25 2045 21:54:06 GMT+0100 (Central European Standard Time), valueHighestBid: 753, …}

This is from component.ts:

ngOnInit(): void {
    this.offer = this.offerService.FindById(this.editOfferId);
    this.offerTemp = Object.assign({}, this.offer);
  }

cancelSelected(offer: Offer): void{
    if (offer === this.offerTemp) {
    // do stuff...
    }
    else {
      console.log(this.offer === this.offerTemp); // false in the console
      console.log(this.offer);
      console.log(this.offerTemp);
    }
  }

And this is the part from my html:

<div>
  <table>
    <tr> 
      <th>Selected offer details: (id: {{offer.id}})</th>
    </tr>
    <tr>
      <td>Title</td>
      <td>
        <input [(ngModel)]="offer.title" type="text" name="" id="">
      </td>
    </tr>
    <tr>
      <td>description</td>
      <td>
        <input [(ngModel)]="offer.description" type="text" name="" id="">
        </td>
    </tr>
    <tr>
      <td>auctionStatus</td>
      <td>
        <select>
          <option *ngFor="let key of keys" [value]="key" [selected]="offer.auctionStatus">{{statusen[key]}}</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>valueHighestBid</td>
      <td>
        <input [(ngModel)]="offer.valueHighestBid" type="text" name="" id="">
     </td>
    </tr>

  </table>
  <button mat-raised-button (click)="deleteSelected()"> Delete </button>
  <button mat-raised-button (click)="saveSelected(offer)"> Save </button>
  <button mat-raised-button (click)="clearSelected(offer)" > Clear </button>
  <button mat-raised-button (click)="resetSelected(offer)" > Reset </button>
  <button mat-raised-button (click)="cancelSelected(offer)"> Cancel </button>


</div>

Is there any way to compare these object without the object reference or another way I could fix this?

JavaScript does not have a built-in property equality operator for objects and arrays.

A simple way to check if objects are equal is using JSON.stringify:

JSON.stringify(objectA) === JSON.stringify(objectB);

This will convert the objects into strings and makes the easily comparable. This approach also works well when the objects are nested.

Another option would be to use an equals method (or better a deep equal method that also works for nested objects), that iterates over all the objects' properties and compares their values.