I always use the ngDirectives with the [ ] and there is no problem, I also tried without them and your both solutions but, same result the color doesn’t change.
And in you .ts file, make your “mycolorvariable” of string type and set its value to required color. Hope it’d help. Tell me if you find any confusion.
Cheers!!!
The reason why changing the stroke value on the ion-spinner doesn’t work is because the stroke colour needs to be applied to the ‘circle’ and ‘line’ elements within the ion-spinner. While you would expect these elements to inherit the style applied to the ion-spinner, these end up being overwritten by the default values. The only way to change the colour of the ‘circle’ and ‘line’ elements is to apply the style to them directly.
With CSS this can be achieved by using the asterisk, which applies the style to all the child elements of the element. I have not been able to find a way to achieve the same effect with [ngStyle]
Since I really wanted to be able to change the colour of the spinners dynamically, I used the following dirty trick:
this.loadingCtrl.present().then(() => {
let dynamicColor = this.dynamicColor;
//selects all the spinners on the page
var spinners = document.getElementsByTagName("ion-spinner");
if (spinners.length) {
for (var i = 0; i < spinners.length; i++) {
// selects all the 'circle' elements within the spinner
var circles = spinners[i].getElementsByTagName("circle");
if (circles.length) {
setColor(circles);
}
//selects all the 'line' elements within the spinner; required for the ios spinners
var lines = spinners[i].getElementsByTagName("line")
if (lines.length) {
setColor(lines);
}
// applies the desired style to the 'line' and 'circle' elements
function setColor(elements) {
for (var j = 0; j < elements.length; j++) {
elements[j].style.stroke = dynamicColor;
elements[j].style.fill = dynamicColor;
}
}
}
}
}
);