One issue I am facing involves passing data to a component using the @Input() decorator. The problem arises when I have a component called list that contains some data. Upon clicking the edit or view button, it loads another component. In my detailComponent:
@Input() serviceTimeGoal: IServiceTimeGoal;
The update component is structured similarly to the detail component. However, while the detail component works perfectly, the update component does not receive any data. Here's how I'm opening the modal:
<table
class="table table-striped table-bordered table=hover"
aria-describedby="page-heading"
>
<!-- Table content here -->
</table>
<!-- Update component -->
<qms-modal id="update-service-time">
<qms-service-time-goal-update
[serviceTimeGoal]="serviceTimeGoal"
></qms-service-time-goal-update>
</qms-modal>
<!-- Detail component -->
<qms-modal id="service-time-goal">
<qms-service-time-goal-detail
[serviceTimeGoal]=“serviceTimeGoal”
></qms-service-time-goal-detail>
</qms-modal>
In my typescript file:
openModal(serviceTimeGoal: IServiceTimeGoal, id: string, e: any) {
this.singleData = serviceTimeGoal;
this.modalService.open(id);
e.stopPropagation();
}
I'm seeking advice on what could be causing this issue. Any suggestions?
EDIT:
updateComponent:
@Input() serviceTimeGoal: IServiceTimeGoal;
ngOnInit() {
this.isSaving = false;
this.updateForm(this.serviceTimeGoal);
}
updateForm(serviceTimeGoal: IServiceTimeGoal) {
console.log(serviceTimeGoal);
// Logic for updating form fields goes here
}
detailComponent:
@Input() serviceTimeGoal: IServiceTimeGoal;
Update:
https://i.sstatic.net/X4eoU.jpg Detail: