My application consists of two key components - OrderListComponent and OrderDetailComponent.
OrderDetailComponent includes two inputs: @Input() order: Order; and
@Input() isHidden: boolean;
The template for OrderListComponent displays a list of orders, with each order having a "details" button. When the "details" button is clicked, the OrderDetailComponent is triggered by passing the selected Order object and setting the isHidden variable to false.
In the "order-list.component.html" template, the relevant code looks like this:
<div [hidden]="!isDetailsClicked">
<app-order-detail [order]="clickedOrder" [isHidden]="!isDetailsClicked"></app-order-detail>
</div>
The template for OrderDetailComponent is as follows:
<div [hidden]="isHidden" *ngIf="order">
<h2>{{ order.productName}} Order Details</h2>
<div>
<span>id: </span>{{order.orderID}}
</div>
<div>
<label>order id: <input [(ngModel)]="order.orderID"
placeholder="orderID" [readOnly]="true"/>
</label>
<label>product name: <input [(ngModel)]="order.productName"
placeholder="productName" [readOnly]="true"/>
</label>
<label>amount: <input [(ngModel)]="order.numberOfProduct"
placeholder="numberOfProduct" [readOnly]="true"/>
</label>
<label>orderer: <input [(ngModel)]="order.orderer"
placeholder="orderer" [readOnly]="true"/>
</label>
<label>status: <input [(ngModel)]="order.status"
placeholder="status"/>
</label>
</div>
<button (click)="goBack()">go back</button>
<button (click)="updateOrder()">save</button>
Upon clicking the "save" button, the OrderDetailComponent is hidden.
While the initial activation of the OrderDetailComponent upon clicking the "details" button in the OrderListComponent works as expected, subsequent attempts to trigger it fail after saving an order.
This issue is puzzling, as the parameters are being correctly passed to the OrderDetailComponent on first click. However, subsequent clicks do not activate the component again.
How can I address this challenge? Thank you.
Edits: Here is the "updateOrder" function:
updateOrder(): void {
this.orderService.updateOrder(this.order).subscribe(() => this.goBack());
this.isHidden = true;
}