Dynamically changing CSS value in Ionic 3

Question

In my app, I have movies' details that can be opened, and I want the buttons of the detail to match the movie.

For instance, with the movie "Back to the Future", I have in my data colors = ["#000000","#123123"].

If I do <div [ngStyle]="{'background-color': movie?.colors[0]}"> the div will be of the color I wanted.

My question is, in Ionic, how can I change variables.scss to have these colors (updated when we open a new movie) ?

Because we can't modify tabs with custom css, so I have to add it to variables.scss...

PS : I know how to theme my app, but I can't change colors in variables.scss dynamically ? (or bypass it) — lrosique
– lrosique, Commented Nov 27, 2018 at 14:59
you can use css variables , I think this the only way because you can set some theme value at run time color , font-size ... — Muhammed Albarmavi
– Muhammed Albarmavi, Commented Nov 27, 2018 at 15:08

Muhammed Albarmavi · Accepted Answer · 2020-01-03 17:08:32Z

8

if you want to update any css color or value like font-size like the sass variable at run time use css variables in this way you can update any css property value at run time if it base on css variable like the color in my example but it 's can be any css value

consider this example

style.css

:root {
--color : red;
}

 * {
   color:var(--color)
 }

AppComponent

  colorList = ['green', 'blue'];

  updateColor(color) {
    document.documentElement.style.setProperty(`--color`, color);
  }

Template

<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>

stackblitz demo 🚀🚀

sass variable are going to compile at build time to there values so they are not reusable at run time

edited Jan 3, 2020 at 17:08

answered Nov 27, 2018 at 15:09

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lrosique Over a year ago

thank you very much, it works to a perfection :D I didn't know we could pass variables from js to css like that ^^

Nasenbaer Over a year ago

one of the most impressive times when stackoverflow is like gold. document.documentElement.style.setProperty(--color, color); worked perfect in Ionic cordova too.

MadMac Over a year ago

I tried setting this to another css variable and it did not work unfortunately. Any idea how to do this? document.documentElement.style.setProperty(--color, --color-primary); Its not ideal setting the color hex values in multiple places.

Rounak Datta · Accepted Answer · 2019-11-19 14:25:08Z

2

For most use cases, it is convenient to programmatically change the CSS value of an element by mapping it with a variable. We want the CSS value to change every time we update the variable, not only through this.ngZone.run().

<div class="progress" [style.height]=currentLevelPercentage>

This example has shown how we can map the height CSS property of the div element (class progress) to the variable currentLevelPercentage and change its value dynamically. currentLevelPercentage is the variable that must be compulsorily present in the TypeScript file.

answered Nov 19, 2019 at 14:25

Rounak Datta

4701 gold badge8 silver badges10 bronze badges

Comments

lrosique · Accepted Answer · 2018-11-27 15:26:52Z

For those here to know how to change color of each tab background in super-tabs (ionic) here's my 4 tabs code (I can now change height and width with code too ^^).

in tabs-page.scss :

  :root {
    --color1: white;
    --color2: white;
    --color3: white;
    --color4: white;
  }

  super-tab-button:nth-of-type(1) {
    background-color: var(--color1)
  }

  super-tab-button:nth-of-type(2) {
    background-color: var(--color2)
  }

  super-tab-button:nth-of-type(3) {
    background-color: var(--color3)
  }

  super-tab-button:nth-of-type(4) {
    background-color: var(--color4)
  }

in tabs-page.html : do nothing particular

in tabs-page.ts :

constructor(public navCtrl: NavController, public navParams: NavParams) {
    document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
    document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
    document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
    document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
  }

Thank you @malbarmawi !

Muhammad Tahir · Accepted Answer · 2019-04-24 05:05:26Z

0

Just an idea about changing style dynamically. here is what i am using

<span [style.width]=foo></span>

Change the value of ‘foo’ in your .ts file https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding

answered Apr 24, 2019 at 5:05

Muhammad Tahir

2,50331 silver badges25 bronze badges

Comments

Chess Master · Accepted Answer · 2021-06-20 10:05:19Z

0

Simply try this

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

answered Jun 20, 2021 at 10:05

Chess Master

11 bronze badge

Collectives™ on Stack Overflow

Dynamically changing CSS value in Ionic 3

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related