In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions:
- If a user clicks the
submitbutton on theinquiryForm, theinquiryFormcomponent should be hidden and theinquiryResponsecomponent should be shown. - Within the
inquiryResponsecomponent, there is adisplay inquiry formbutton. When this button is clicked, theinquiryResponsecomponent should be hidden and theinquiryFormcomponent should be displayed. However, I am having trouble implementing this functionality. - While I understand that this can be achieved using a
router, I am looking for an alternative solution involving either aserviceor asubject.
I have created a demo showcasing the issue on stackblitz. Here is what I have attempted:
inquiry-response.ts
getReceivedSummons() {
this.inquiryStore.summons$.subscribe(result => {
this.receivedSummon = result;
this.addCheckboxes();
this.isShowResponse = true;
});
}
showInquiryForm() {
// do something
}
inquiry-response.html
<div *ngIf="isShowResponse">
<p>Inquiry Response</p>
<form [formGroup]="form" (ngSubmit)="submitSelectedCheckboxes()">
<ng-container formArrayName="receivedSummons" *ngFor="let summon of formReceivedSummons.controls; let i = index">
<ng-container [formGroup]="summon">
<ng-container formArrayName="items" *ngFor="let item of formReceivedSummonsItems(i).controls; let j = index">
<ng-container [formGroup]="item">
<input type="checkbox" formControlName="isChecked"> {{item.value.name}}
</ng-container>
</ng-container>
</ng-container>
<div *ngIf="!summon.valid">At least one order must be selected</div>
</ng-container>
<br>
<span class="button">
<button [disabled]="!form.valid">submit</button>
</span>
<button (click)="showInquiryForm()">Change ID Number - Display Inquiry Form</button>
</form>
</div>