I am looking for a solution to seamlessly swap between two components, each containing a form, while retaining the data inputted by the user without submitting. This functionality is similar to switching tabs in simple HTML.
My approach involves using a variable called "value" in the parent component to determine which child component to display:
The parent component's HTML structure:
<ul>
<li class="nav-item"><a (click)="changeValue(1)">Dine In</a></li>
<li class="nav-item"><a(click)="changeValue(2)">Delivery</a></li>
</ul>
</div>
<app-dine *ngIf="value == 1"></app-dine>
<app-delivery *ngIf="value == 2"></app-delivery>
In the parent component TypeScript file, I have implemented a simple function called changeValue:
changeValue(x){
this.value=x;
}
The child components consist of forms where users can input data. The goal is to switch between components without losing any entered data:
<form>
<input type="text"> //If the user writes anything here, I want to switch components without losing the data
</form>
If you have any suggestions or solutions, please share them. Thank you!