Angular - dynamically change Ionic CSS properties in [ngStyle]

Question

I'm trying to use [ngClass] to dynamically change the --bullet-background-active color for the Ionic Slide based on this article.

<ion-slides pager="true" [ngStyle]="{'--bullet-background-active':BulletColorVar}">

However, it does not seem to work specifically for Ionic custom CSS properties.

Any ideas how to fix this?

Answer 1

try using style.setProperty(propertyName, value, priority) function

CSS

ion-slides {
   --bullet-background-active: --bullet-color-var
}

TS

document.body.style.setProperty('--bullet-color-var', BulletColorVar)