Ionic 4 - How to set CSS Custom Properties dynamically

#1

Has anyone figured out how to setup Ionic 4’s CSS Customer Properties dynamically? eg --background

I’ve tried below without much luck.

<ion-item button="true" (click)="action(state)" [style.--background]="colorVar" margin>           
   Some values
</ion-item>

where in component

this.colorVar = "blue"

#2

Hello,
try with class="example" instead of [style.–background]=“blue” in html
and in the .scss =>
.example { background: blue; margin: ..... }
I do not know if it’s the best solution but I put my css like that

#3

Is this what you’re looking for?

ion-item {
    --background: var(--ion-color-primary);
    //Or 
    --background: #cccccc;
}

Ion item css properties

#4

I just did it at the moment
in . html

  <ion-item class="item">
  </ion-item>

in .SCSS

.item{
    --ion-background-color:grey;
}

it works well. it all depends if we want all the <ion-items> to take the same property or not

#5

Sorry all I should have been explicit when I meant dynamic. I want to set the background where the color is a variable as follows (as well as updating my original question):

[style.–background]=“colorVar”

This doesn’t work in Ionic. I actually found a solution but not sure if this the best practice as it requires the sanitizer. Keen on anyone’s else alternative on how to do this?

SCSS

.action {
    --background: var(--myvar);
}

Component

value: string = "blue";
  @HostBinding("attr.style")
  public get valueAsStyle(): any {
    return this.sanitizer.bypassSecurityTrustStyle(`--myvar: ${this.value}`);
  }

Html

<ion-item button=“true” (click)=“action(state)” class="action">
Some Content
</ion-item>
1 Like
#6

thanks, I used your example and improved it by not requiring sanitizing:

 document.body.style.setProperty('--my-var', colorVar);

you also don’t need separate class, as you can set the variable inline:

<ion-button style='--background:var(--my-var)'></ion-button>
3 Likes
#7

Thanks I will give this a go

#8

i updated my reply with how to use inline set

1 Like
#9

Check out here How to Customize Ionic 4 Toast using CSS Custom Properties given here
Screenshot_7

Just Add Custom CSS class

this.toast = this.toastController.create({
  message: 'Ionic 4 Auto Hide Toast on Bottom',
  showCloseButton: true,
  position: 'middle',
  closeButtonText: 'Yeah',
  animated:true,
  cssClass:"my-custom-class"
}).then((toastData)=>{
  console.log(toastData);
  toastData.present();
});

Then in global.scss file add

.my-custom-class{
–background: #FFDB22;
–color:#FF3F22;
–border-style:solid;
–border-width :5px;
–border-color:#FF3F22;
}

#11

If I want to change colour for each item dynamically

[ngStyle]="{'background-color': item.color}"

I found here the solution:

#12

Also, If anyone is looking to change the class dynamically, use [ngClass].


<ion-item [ngClass]="{'slideUp':item.isDone}> 
</ion-item>
1 Like
#13

Hi all,

The original question was for setting the CSS customer properties eg --background due to the use of shadows in Ionic 4. Not general css properties like background-color (which can be done using ngStyle or style).

@abuassar solution works (thanks!) but only when the values are hardcoded. If you are using dynamic variables you need to do an extra step and import elementRef and set the style as follows.

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

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

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