Creating dynamic SASS variable to change Ionic 2 tab menu?

228
January 30, 2017, at 04:29 AM

I'm looking for changing the color of my tab menu in Ionic 2 project, getting a value from backend (type string, like: '#ebebeb').

<ion-tab> tag have the attribute [color]="" which get the value from "variables.scss" sass file.

In variables.scss we can find:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  custom: #ebebeb
);

I added the variable "custom" with my color.

Ok, now, I want to know if it's possible to make dynamic this variable "custom". I'm reading the string from backend (http request) in Angular 2 typescript, so I have the global variable "colorString", but I want to know if I can change this SASS variable "custom" and push it dynamically the colorString variable.

I've read that it's impossible to do that, but I want to know your opinion, maybe with jQuery?

Greetings ;)

Answer 1

You cant modify the sass variable on the fly. But if you want to modify styles dynamically based on a value from the back-end then be ready to get your hands dirty with javascript.

This is not exactly a very graceful way of doing it but :

<ion-tab [ngStyle]="getStyleFromBg()" ></ion-tab>

In your ts file :

variable : any;
In constructor : get the string from backend & store to variable
getStyleFromBg(){
    if(variable)
         return "background-color : "+variable; // replace background-color with the style attribute
    else
        return "";
}

Once again, this is not a very elegant solution & I would suggest not to do it this dynamically.

A better way to do it is to have a bunch of sass variable with these color codes & just get from back-end which one of these color codes you would want to use. That woud be a better way to do it.

READ ALSO
JQuery - search elements values with given regex [duplicate]

JQuery - search elements values with given regex [duplicate]

This question already has an answer here:

102
Cascading dropdownlist in MVC not Working

Cascading dropdownlist in MVC not Working

Please assist I have an issue with populating my cascading dropdownlistPlease see code below

107
how to add hover effect in hightcharts?

how to add hover effect in hightcharts?

can we add hover effect in hightcharts (donut chart)Can we add hover effect in donut chart shown in given url

121
I want to disable all the dates except specific dates in daterangepicker

I want to disable all the dates except specific dates in daterangepicker

Currently I am using daterangepicker (http://wwwdaterangepicker

137