Initially, the task was to send JSON data from the parent component to the child component. However, loading the data through an HTTP request in the ngOnInit event posed a challenge as the data wasn't being transmitted to the child component. Here is the initial approach:
data: TransSalesOrder = new TransSalesOrder();
ngOnInit(): void {
if (this.dataId > 0) {
const data: SelectItem = new SelectItem();
data.id = this.dataId;
const sb = this.transSalesOrderService.view(data).subscribe(response => {
this.transSalesOrderForm.patchValue(response);
this.data = response;
if (this.transSalesOrderForm.get('isDeleted').value) {
this.editButton = false;
this.deleteButton = false;
this.isDeleted = true;
}
}, err => {
this.openSnackBar(err);
});
this.subscriptions.push(sb);
}
}
In the parent HTML, the data was sent as follows:
<app-trans-sales-order-detail-list [salesOrderDetailsInput]="data.transSalesOrderDetail"></app-trans-sales-order-detail-list>
However, when checking for the value of salesOrderDetailsInput in the child component.ts using console.log, it returned 'undefined'.
Realizing that the issue might be due to the parent loading the data too late, I attempted another approach by utilizing ngOnChanges event:
ngOnChanges(changes: SimpleChanges) {
console.log(changes.salesOrderDetailsInput.currentValue);
}
This enabled me to receive the data passed from the parent. Yet, after researching on Stack Overflow, I learned about the necessity of async functions and observables when passing values from the parent to the child without the need for ngOnChanges. Hence, I adjusted my code accordingly:
In the parent component:
<app-trans-sales-order-detail-list [salesOrderDetailsInput]="data.transSalesOrderDetail | async"></app-trans-sales-order-detail-list>
Unfortunately, this modification resulted in an error during compilation and in IntelliJ Idea IDE, stating:
Argument type TransSalesOrderDetail[] is not assignable to parameter type Observable<unknown> | Promise<unknown>Below is the updated child component.ts code snippet:
@Input() salesOrderDetailsInput: Observable<any>;
What could be missing in the implementation?