I currently have an array containing 4 values that I can toggle (remove and add to the array).
selectedSections: any[] = ['one', 'two', 'three', 'four'];
Next, there is a button that when clicked, will show or hide each selected value.
<button (click)="toggleVal('one')">Toggle One</button>
<button (click)="toggleVal('two')">Toggle Two</button>
<button (click)="toggleVal('three')">Toggle Three</button>
<button (click)="toggleVal('four')">Toggle Four</button>
My challenge lies in ensuring that when a value is added back, it returns to its original position rather than being appended at the end. Currently, whenever a value is added, it gets placed at the end of the array. I am looking for a way to either specify the position where it should be added or maintain its current position.
Below is the function responsible for toggling the values:
toggleVal(val: any) {
if (this.selectedSections.includes(val)) {
let index = this.selectedSections.indexOf(val);
this.selectedSections.splice(index, 1);
} else {
this.selectedSections.push(val);
}
this.howMany();
this.filterData();
}
Any suggestions on how I can achieve this desired behavior?