I'm encountering a challenge with button naming in my Angular SPA component that I'm currently developing.
Background - On a page where a data table is displayed, there's a 'Select' control that allows users to choose which columns to hide. When a user selects a column, it gets hidden and a button with the column name appears. Users can select multiple columns to hide, each resulting in a corresponding button on display. However, my issue lies in the fact that all buttons end up named after the last column selected.
Approach - To manage column information, I've established an array.
Component HTML:
<div *ngFor="let column of columns">
<button class="actionbutton" id="{{columnId}}" (click)="showColumn(selectedColumn)">{{columnName}}</button></div>
Component .ts File:
for (let i = 0; i < this.columnArray.length; i++) {
this.columnId = this.columnArray[i];
this.columnId = this.columnId.replace(' ', '-') + '-' + i;
this.columnName = this.columnArray.splice(0, this.columnArray.length);
this.columns.push(this.columnName);}
As a newcomer to Angular & Typescript, resolving this issue has been a bit tricky for me. Any assistance or guidance would be highly appreciated.