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...

Answer 1

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

Answer 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.

Answer 3

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 !