CODEWITHSUNDEEP
htmlcssangularionic-frameworkdynamic
lrosique
lrosique

Reputation: 113

Dynamically changing CSS value in Ionic 3

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

Upvotes: 5

Views: 9369

Answers (5)

Chess Master
Chess Master

Reputation: 1

Simply try this

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

Upvotes: 0

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24472

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

Upvotes: 8

Rounak Datta
Rounak Datta

Reputation: 460

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.

Upvotes: 2

Muhammad Tahir
Muhammad Tahir

Reputation: 2485

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

Upvotes: 0

lrosique
lrosique

Reputation: 113

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 !

Upvotes: 1

Related Questions