Angular Component's ngOnChanges Not Reflecting Updated @Input Data

Below is one of the common causes and fixes for the problem you’re observing.

─────────────────────────────
Problem:
─────────────────────────────
Angular’s ngOnChanges only fires when the parent “changes” the object reference you pass into the child. In your case, even though you see the correct value logged inside ngOnChanges, later the value of invoiceId is null when onEdit() is called. This can happen if:

• The component’s input object is changed in a way that still ends up with a null reference for invoiceId later (for example, if the parent later reassigns invoiceData to null or a different value)
• The property update is done on a property of invoiceData (without changing the object reference) so ngOnChanges isn’t reliably called
• There is a timing or change detection issue that causes invoiceId to be “lost” after the initial update

─────────────────────────────
Suggested Fix:
─────────────────────────────
A typical solution is to use an Input setter instead of relying solely on ngOnChanges. This way, every time invoiceData is set (or reset), you can update invoiceId immediately. For example:

TYPESCRIPTCopied
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-invoice',
  templateUrl: './invoice.component.html',
  styleUrls: ['./invoice.component.css']
})
export class InvoiceComponent {
  invoiceId: string | null = null;

  private _invoiceData: any = null;
  
  @Input()
  set invoiceData(value: any) {
    this._invoiceData = value;
    if (value && value.invoiceGenInfo && value.invoiceGenInfo.invoice) {
      this.invoiceId = value.invoiceGenInfo.invoice.id;
      console.log("InvoiceData updated via setter:", this.invoiceId);
    }
  }
  get invoiceData() {
    return this._invoiceData;
  }

  onEdit(): void {
    // Will always log the updated invoiceId
    console.log("InvoiceData in Edit:", this.invoiceId);
  }
}

─────────────────────────────
Explanation:
─────────────────────────────

• The setter runs whenever the parent assigns a new value to invoiceData—even if the new object reference has the update you need.
• This solution avoids depending solely on ngOnChanges (which can be tricky when parent data changes occur asynchronously or when the reference itself is updated in an unexpected order).
• Ensure that the parent component always passes the full object or a new object reference (if a nested property is updated) so that the setter is triggered.

─────────────────────────────
Additional Considerations:
─────────────────────────────

• Verify that the parent is not setting invoiceData to null or another value after your initial update.
• If you are using OnPush change detection, make sure that the new object reference is provided to trigger change detection.
• Ensure that any asynchronous API calls that update invoiceData are doing so safely within Angular’s zone (for example, using HttpClient) to trigger change detection.

This approach should guarantee that your invoiceId variable is in sync with the latest invoiceData, and when you trigger onEdit, it logs the correct value.