Search code examples
ionic-framework

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

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'"