Ionic 4 - How to set CSS Custom Properties dynamically

Ionic Framework
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 Likes
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

1 Like
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

1 Like
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>
3 Likes
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>
9 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:

7 Likes
12

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


<ion-item [ngClass]="{'slideUp':item.isDone}> 
</ion-item>
3 Likes
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); 
}
7 Likes
14

This is just what i was looking for, thank you so much!

15

The originally requested functionality of
[style.–background]=“colorVar”
appears to work now (I am on Angular 9, Ionic 5)

16

@jcn-ithaca
Are you sure this is working? I just tried it with ion-button and nothing happens:

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

and

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

Did you use 2 dashes? Are you on an earlier version of Angular maybe?

18

Yes tried with both dashes and on angular 9 and ionic 5. I’ll try on a fresh template and see if I get the same results

19

If you actually copy/pasted your code directly when posting (which is a really good idea, as it reduces the likelihood of comments like this one), you’ve got a mixture of hyphens (‘-’, good) and endashes (‘–’, bad).

20

I did copy my code directly mate! The issue is I originally copied jcn-ithaca code which had the endash and then added the hyphen. I now manually did with the dash and I can confirm it.works. Thanks @rapropos for pointing it out! Thanks @jcn-ithaca for the update on this. Correct code below:


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

Sorry, rereading that I guess it’s hard to convey tone through text. It wasn’t intended to come across as scolding, but rather just an observation that what I was about to say might be totally irrelevant if the endash was just an artifact of your posting method, and not in the code.

I see it all the time with so-called “smart” quotes.

1 Like