use variable for style on ionic

Question

i would like to know if it is possible to use variable, declared in my ts file for styling my ionic components.

I know i can do it by declaring the variables as globals, but as they are not fixed, i have to declare then in my ts file.

Example: i have this code, witch is working:

  <ion-col style=" height: 170px; background: rgb(226, 45, 144)" > {{room.name}}</ion-col>

But i want something like:

<ion-col style=" height: room.height; background: room.bckg_color" > {{room.name}}</ion-col>

Thanks for your help.

I´ve got the response from the ionic academy. ionicacademy.com/community/index.php?/topic/… — ccorreia
– ccorreia, Commented Jan 9, 2018 at 9:22

Ricky Levi · Accepted Answer · 2018-07-17 20:27:45Z

1

I don't have an account for Ionic Academy, can you share the answer ?

Otherwise, this would be my answer, this is called "inline style", and it can be defined with something like:

<ion-col [style.height.%]="room.height" [style.backgroundColor]="room.bckg_color" > 
   {{room.name}}
</ion-col>

Or Ionic 1

<ion-col [ngStyle]="{height: room.height, backgroundColor: room.bckg_color}">
   {{room.name}}
</ion-col>

answered Jul 17, 2018 at 20:27

Ricky Levi

8,2093 gold badges64 silver badges77 bronze badges

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

1 Answer 1