Ionic 4 button ngStyle background-color

Ionic Framework
1

Previously, we could set the background-color of a button with ngStyle like so:
<ion-button ion-button small [ngStyle]="{'background-color':'pink'}">TEST</ion-button>

But now that only changes the background behind the button not the BG within the button:
image

I have tried using --background-color and --ion-background-color

I am using ngStyle to set color conditionally:
<ion-button ion-button small [ngStyle]=" !isSelected&&{'background-color':'pink'}">TEST</ion-button>

2

https://blog.ionicframework.com/shadow-dom-in-ionic-and-why-its-awesome/

3

How would you set the background-color of a button using ngStyle?

4

As long as I have <ion-button> within <ion-buttons> ngStyle works:
<ion-buttons slot="start"> <ion-button ion-button small [ngStyle]="{'background-color':'pink'}">TEST<ion-button> </ion-buttons

5

read the tutorial, I think you are missing some important keys about shadow dom, introduced in ionic v4, and how you could style element across the dom

also this other video from @joshmorony is a really good intro to styling in v4

6

I can style the background color using --ion-color-base: pink!important; in scss.

How would you use this in ngStyle?
The following is not working for me. Maybe you cannot?

<ion-button [ngStyle]="{'--ion-color-base':'pink'}">Test</ion-button>

Edit:
Okay, interestingly, I can use style but not ngStyle.
This works:
<ion-button style='--ion-color-pink'>Test</ion-button>

But, this removes my option to use conditional ngStyle.
I realize there are other ways to do this but I am trying to find out if I cannot use ngStyle to achieve this.

7

why don’t you use a separate scss file for your page or component?

then just define a class style like

 <ion-button [class.whatever]="myCondition">

and in your secs

ion-button {
  &.whatever {
     --a-variable-to-customize: red;
 }
}
1 Like
8

Sounds good but is using ngStyle no longer an option?

9

I have absolutely no idea, I don’t like to have style in middle of my template, I don’t use style or ngStyle at all :wink:

10

Here is my scenario:

I have a number of buttons and each should be colored depending on if they were selected.
I used [ngStyle] to color them based on a var withing the buttons parent item in a list.
I actually had these in slides to boot.
So, the var that determines if they are a different color is: cat.isSelected

<ion-slides>
            <ion-slide class="catSlide" *ngFor="let cat of categories_ar; let i = index">
                <ion-buttons slot="start">
                    <ion-button class="catBtn" ion-button small (click)="select_category(cat)" [ngStyle]="!cat.isSelected&&{'background-color':'green'}||{'background-color':'pink'}">{{cat.title}}</ion-button>
                </ion-buttons>
            </ion-slide>
        </ion-slides>

with ngStyle I cannot set the color.
With style, I can set the color but not use condition

Avoiding these two options and doing it in scss, how would I pass each individual cat.isSelected to the condition?

.catBtn{
@if (isSelected) {
–ion-color-base: yellow!important;
}
}

11

Okay, duh…

<ion-button [class.catBtn]="cat.isSelected"> </ion-button>

1 Like
12

Yep just defined multiple class in your scss, one for each single colors or something

13

Almost there…

If I want to define a default class ( not selected ) how does this work without passing notSelected…

This works:
<ion-button [class.catBtn]='!cat.isSelected' [class.catBtnSelected]='cat.isSelected'></ion-button>

This does not:
<ion-button catBtn [class.catBtnSelected]='cat.isSelected'></ion-button>

14

a default class, like standard css?

<ion-button class="something">

in scss

 ion-button.something {
 }
15

or thru attributes

<ion-button catBtn

=> in scss

 ion-button[catBtn] {
 }
16

But in the html this does not work:
<ion-button catBtn [class.catBtnSelected]='cat.isSelected'></ion-button>

nor:
<ion-button [class.catBtn] [class.catBtnSelected]='cat.isSelected'></ion-button>

But this does:
<ion-button [class.catBtn]='!cat.isSelected' [class.catBtnSelected]='cat.isSelected'</ion-button>

17 
 <ion-button class="catBtn" [class.catBtnSelected]='cat.isSelected'></ion-button>
18

Also does not work. Appreciate the effort though.
The catBtn class works but the catBtnSelected does not now.

Due to the title being related to whether or not ngStyle will work conditionally. I will leave this open in case anyone else chimes in.

Otherwise, it looks like not using ngStyle is the way to go and I have a lot of v3 pages to update.

19

Weird, the following works for example well in my app

<ion-item [class.item-toggle-checked]="itemShouldBeChecked" class="item-toggle">

good luck then

20

I tried it n reverse order as you have but still no catBtnSelected working (your class.item-toggle-checked).
Can you share your scss for that example?