Dynamic button color

Ionic Framework ionic-v3
1

I have a button:

<button>My Buttont</button>

I need to conditional change the color of it. For example:

<button if var < 20 = Primary if var >= 21 Danger>My Buttont</button>

How can I do this?

2

Look at ngclass (https://docs.angularjs.org/api/ng/directive/ngClass) to help you along. If you are using Ionic2, you will have to find the Angular2 version

3

Thanks for the reply, but I don’t think we can use it like that:

<button Danger [ngClass]="{active: Primary, disabled: Primary, hover: Primary}" >MyButton</button>

This does not work.

4

o_0
pseudo-code:
<button [ngClass]="{Primary: var < 20, Danger: var >= 21}" >MyButton</button>

5

I have just tried this, but it is not working for me.

<button [ngClass]="{Primary: bl < 20, Danger: bl >= 21}" >MyButton</button>

Then inside my consructor:

this.bl = 100;

So it should be a red button, but it is blue.

6

oh man, because you need use really classes. Something like:

<button [ngClass]="{'button-danger': bl >= 21}" >MyButton</button>

I am strongly recommend you learn Angular before.

2 Likes
7

WORKS! Thank you so much!

8

In Angular 2 could be written this way as well:

<button [class.button-danger]="bl >= 21">MyButton</button>
9

I tried this but it doesn’t seem to work:

<button [ngClass]="['button-fab-bottom','button-fab','button-small','button-danger','button-fab-left']"

If I use this:

<button fab-bottom fab small danger fab-left>Send</button> it works. But how do I dynamically add fab-bottom fab small danger fab-left

10

you are missing conditions

11

I tried with conditions already, it doesn’t help.

12

I don’t understand why would you want to apply all these classes dynamically. In case that you really need all of them added/removed from the button then consider using two different buttons instead - one without the classes and one with all of them - and then you can hide/show the appropriate button based on some condition. If this doesn’t help, could you provide some code that demonstrates what exactly are you trying to achieve?

13

Thanks. The reason i want it dynamically is because I want to provide a FAB button, and user can choose whether the button is displayed on Left, Right or Center of the app.

14

@tuongaz It seems that just setting the CSS class doesn’t work for FAB buttons, e.g. adding button-fab-right doesn’t move the button to the right.

Therefore I would suggest you to use something like ngSwitch to change the position depending on a property position that you set in your code as needed:

    <div [ngSwitch]="position">
      <button *ngSwitchWhen="'left'" fab-bottom fab small danger fab-left>Send</button>
      <button *ngSwitchWhen="'center'" fab-bottom fab small danger fab-center>Send</button>
      <button *ngSwitchWhen="'right'" fab-bottom fab small danger fab-right>Send</button>
    </div>

Here is a working demo.

1 Like
15

Not working in Ionic 2 for some reason…

<ion-badge [class.bonus]="item.type === '+'" item-right>
                {{item.type}} {{item.amount}} мин.
</ion-badge>

Neither works this piece of code:

<ion-badge [ngClass]="{'bonus' : item.type === '+''}" item-right>
                {{item.type}} {{item.amount}} мин.
</ion-badge>
16

@fredy26 Both examples are working for me with beta.4, see this demo plunker.

17

It may be so. I’m still using beta.3.
Do you have any experience upgrading to beta.4?
I’m affraid that my code will break after upgrade…

Here is my system info:

Cordova CLI: 6.1.1
Gulp version: CLI version 1.2.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.24
Ionic App Lib Version: 2.0.0-beta.14
ios-deploy version: Not installed
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.7.1
Xcode version: Xcode 7.3 Build version 7D175

18

@fredy26 I recently upgraded my project to beta.4 almost without problems (I just had forgotten to update one file). I think that you shouldn’t have any serious problems if you follow this upgrade guide. Or if you prefer the safe way - you could make a copy of your project folder (or a branch if you’re using VCS) and perform the upgrade there to see if you’ll hit any problems.

19

Whoa! Thanks. I just upgraded the copy of my project by changing package.json version of ionic-angular and angular (and related dependencies also).
[ngClass] is not working yet (and floating placeholders on input fields stopped working)
As the next step - I will try to follow all the steps from your guide.
Thanks a lot! Great job you’ve done.

20

Nope. Still not working. Looks like a problem was not in Ionic version.
Maybe I should import ngClass as a directive?