angular2 - Change color button dynamically

Question

I am creating an application in angular 2 and typescript.

I want to put some background color in my buttons depending on an variable.

<div>
  <button md-button>1. Choose travel</button>
  <button md-button>2. Choose seats</button>
  <button md-button>3. Fill data</button>
  <button md-button>4. Pay</button>
</div>

I have a variable in my component:

currentStep: number = 1; //1 Select travel, 2 Choose seats, 3 Fill data, 4 Pay

And for example, I want that when the currentStep is equal to 3, the third button change his background color to blue.

Which is the best way to achieve this ?

Thank you.

you want to apply on click or when?

Aravind
– Aravind

2017-03-07 20:09:21 +00:00
Commented Mar 7, 2017 at 20:09 — Aravind
– Aravind, Commented Mar 7, 2017 at 20:09
whenever the variable changes

Kimy BF
– Kimy BF

2017-03-07 21:21:04 +00:00
Commented Mar 7, 2017 at 21:21 — Kimy BF
– Kimy BF, Commented Mar 7, 2017 at 21:21

Hung Cao · Accepted Answer · 2017-03-07 19:52:14Z

2

You can use ngClass:

[ngClass]="{'fill-data-btn': currentStep == 3 }"

In you css:

.fill-data-btn{
background-color: blue;
}

Just to give you an idea.

answered Mar 7, 2017 at 19:52

Hung Cao

3,2083 gold badges22 silver badges29 bronze badges

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

Comments

El houcine bougarfaoui · Accepted Answer · 2017-03-07 19:55:44Z

2

<div>
  <button [style.background]=" currentStep === 1 ?'blue':'otherColor'" md-button>1. Choose travel</button>
  <button [style.background]=" currentStep === 2 ?'blue':'otherColor'" md-button>2. Choose seats</button>
  <button [style.background]=" currentStep === 3 ?'blue':'otherColor'" md-button>3. Fill data</button>
  <button [style.background]=" currentStep === 4 ?'blue':'otherColor'" md-button>4. Pay</button>
</div>

answered Mar 7, 2017 at 19:55

El houcine bougarfaoui

37.6k10 gold badges40 silver badges38 bronze badges

Collectives™ on Stack Overflow

angular2 - Change color button dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related