How do I change the color of a selected label in Ionic?

Issue

I want to change the color of the selected label. I’m using –color-selected in CSS, but it doesn’t work.

Html

  <ng-container *ngFor="let item of daily"> 
        <ion-label id="daysName" class="favorites-label" (click)="dayName($event)">{{item.day}}</ion-label>   
      </ng-container>

TS

 dayName($event) {
    console.log('dayName', $event.target.innerHTML)
}

CSS

   #daysName {
        color: white;
        --color-selected: red;
    }
    ion-label.favorites-label {
        --color-selected: red;
    }

Solution

You can use ngClass:

[ngClass]="{'favorites-label': step === 'step1'}"

Or

[class.favorites-labels] = "step === 'step1'"

Answered By – StackoverBlows

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0