Angular ngOnChanges Not Updating Component Variables When @Input() Changes

I have an Angular component that receives an @Input() property from a parent component. The parent component fetches data asynchronously (from an API), and when the data is set, ngOnChanges should update my local component variables.

However, my variables remain null even after the data is received and ngOnChanges is triggered.

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

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

@Input()
invoiceData: any = null;

ngOnChanges(changes: SimpleChanges): void {
if (changes['invoiceData'] && changes['invoiceData'].currentValue) {
this.invoiceId = this.invoiceData?.invoiceGenInfo?.invoice?.id;
console.log("Updated invoiceData:", this.invoiceId); //this works
}
}

onEdit(): void {
console.log("Invoice Data in Edit:", this.invoiceId);
}
}


Above is the angular component of the code. The console.log in the ngOnChange method does print the value after a few seconds since it's asynchronous. But even after I see the console value when I trigger onEdit() with a click from a template the console logs as null.

How can I fix this? I need to update the template with the data from the invoiceData object after the API from the parent is completed.?

Thanks

Continue reading...