To enable a button only when the values of the 'invoice' model differ from those of the initial model, 'initModel', I am trying to detect changes in the properties of the 'invoice' model.
This comparison needs to happen in the view like this:
<button mat-button (click)="saveChanges()" [disabled]="invoice !== initModel">Save Changes</button>
The 'invoice' model is initialized by assigning it the value of another variable from a service in the constructor.
I attempted to set an 'initModel' component variable, but since it binds with the 'invoice' model, any changes in 'invoice' lead to changes in 'initModel'. Therefore, I couldn't define 'initModel' as a constant accessible in the view.
Component:
export class EditInvoiceComponent implements OnInit {
invoice: Invoice;
initModel;
constructor(private invoicesService: InvoicesService) {
this.invoice = this.invoicesService.selectedInvoice;
this.initModel = this.invoice;
}