Currently, I'm working on a screen where users can select multiple options from a table. The requirement is that they must select at least 3 options before they can proceed. However, I am facing difficulties in implementing this functionality and unsure of what to research.
At the moment, I have an array of values stored in my component:
values = ["Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7", "Option 8", "Option 9", "Option 10", "Option 11", "Option 12"];(Please note that these values will be fetched from an API later on, but for now placeholder data suffices)
These values are displayed on the screen and users can select or deselect them without any issues. Now, I need to restrict the selection to only 3 choices and enable the next button once 3 selections have been made.
Here is the current code for the selection buttons:
<div *ngFor="let value of values">
<button class="selection_btn text-center" #btn (click)="btn.classList.toggle('selected')">{{value}}</button>
</div>Next Button Functionality:
next() {
this.router.navigate([`${appRoutesNames.PAGE_2}`]).then();
}Please bear in mind that the actual route name in my file differs from the placeholder used here.