I am new to Angular and could really use some assistance with a problem I'm facing.
Situation: I'm currently working on angular15 and have implemented a dropdown list. When selecting an option from the first dropdown, it populates values in the second dropdown automatically. Once the second dropdown is selected, I need to click on a submit button to navigate to the next page.
Issue: The problem arises when I navigate to the next page and then want to go back to view the previously selected options. How can I achieve this?
What method should I use to retrieve the selected options?
I attempted using the router method, but it doesn't seem to be working.
A.component.html
First Dropdown:
<select #selectField class="form-select"
(change)="setFieldValues(selectField.value, i)">
<option selected value="null" style="display: none;"> please-select</option>
<ng-container *ngFor="let field of dataFields">
<option value="{{field.name}}">{{field.name}}</option>
</ng-container>
</select>
Second Dropdown:
<select #selectSecond class="form-select"
(change)="setInputsWidth(selectSecond.value, i)">
<option selected value="null" style="display: none;" >please-select</option>
<ng-container *ngFor="let operand of getSecond(selectField.value)">
<option value="{{operand}}"> operand</option>
</ng-container>
</select>
B.component.html
<button (click)="backToPageA()">Back</button>
B.component.ts
backToPageA(){
this.router.navigate(["/PageA"]);
}