While passing an object containing data length and an array of objects to a child component, I noticed a strange behavior. Even after changing the data in the child component and reloading the page, the edited property still persists.
To visualize this issue, please refer to the screenshots below:
Upon initial navigation to the route, the data remains unmodified: https://i.sstatic.net/U9Wl9.png
After editing the data: https://i.sstatic.net/qyz4a.png The right side shows the addition of the finalAmount property with its initialized value
Upon returning to the same component, finalAmount is set to 5 https://i.sstatic.net/f8mSJ.png
The issue lies in the fact that the property should not be present in the data since it's inherited from the parent.
Below are the relevant files:
- stepper.component.html (Parent Component)
<mat-step [stepControl]="thirdFormGroup" >
<ng-template matStepLabel>Prepare Invoice</ng-template>
<ng-template matStepContent>
<div class="container-fluid">
<app-create-invoice [selectedCustomersInfo]="selectedCustomerData"
[selectedProductsData]="{lengthOfData:cartItems.length , selectedProducts:cartItems}"></app-create-invoice>
</div>
</ng-template>
</mat-step>
- stepper.component.ts:
...- create-invoice.component.html (Child Component):
...- create-invoice.component.ts:
...The persisting of properties like finalAmount, discount, and sgst even after editing raises concerns. Any assistance would be greatly appreciated.