Dynamic text in buttons is missing - until I click any button, then the button text populates one by one

                    <ion-button 
                        *ngFor="let group of equipmentGroups" 
                        [ngClass]="{'selected-menu-item': group == selectedZoneGroup}" 
                        (click)="selectGroup(group)"
                        [style.--background]="group === selectedZoneGroup ? '#9a6cba' : '#6b1fa1'"
                        expand="full"
                    >
                        {{group.name}} &nbsp;  
                        <ion-badge color="light" class="ion-text-end">
                            <fa-icon [className]="group.StatusClass" icon="check" ></fa-icon>
                        </ion-badge>
                    </ion-button>

^Those empty buttons will gradually populate, one by one, just by clicking any of the blue buttons (the list items should be populating each button by default).

My issue is related to my hacky way of overriding the background color of each button using [style.–background].

My intention was just to change the button color for the selected element, which is resulting in this bug. Is there a cleaner way of achieving this?

1 post - 1 participant

Read full topic