Ionic 4 - How to set CSS Custom Properties dynamically

No offence taken to the contrary glad you pointed it out as otherwise I would have done a very cumbersome solution to setting the custom properties for a set of dynamic buttons i had in a ngFor loop.

Thanks everyone for their help on this. I am making below as solution for this post for future references:

Setting CSS Customer Properties Dynamically

For angular 9+

<ion-button [style.--background]="'pink'" >
Some Button
</ion-button>

Angular <9

component

import { ElementRef } from '@angular/core';
constructor(private elementRef:ElementRef);

ngOnInit(): void {
    this.setStyle('pink');
}

setStyle(value: string): void {
    this.elementRef.nativeElement.style.setProperty('--my-var', value); 
}

css

.custom {
--background:var(--my-var);
}

html

<ion-button class="custom" >
Some Button
</ion-button>

In that second case, I would go with [ngClass]="variable", variable = 'pink', and .pink in the CSS instead. That keeps styling out of the component code.

In case anyone is interested. If you want to dynamically style you can do something like this to:

Ionic 5

<ion-chip [style.background]="'var(--ion-color-' + getColor(bunnies.status) + ')'" outline="true">
  <ion-label>Bunnies</ion-label>
</ion-chip>

...

public getColor(bunniesStatus: string): string {
    const status = {
      new: 'primary',
      pending: 'medium',
      rejected: 'danger',
      accepted: 'success',
      paid: 'success',
    }

    return status[projectStatus]
  }

hope it helps someone :slight_smile:

When colorCode is a member variable in the correspoding page class, then also interpolation can be used for changing an element’s background color at runtime:

<ion-toolbar style="--background:{{colorCode}}">

However, colorCode must contain the color in a format that is valid in CSS, e.g. #FFFF00.