How to change button color dynamically in angular2

Question

I am trying to change my button color dynamically but not achieved can someone suggest help

   <a  class="button buttonaquacss button-mini button-aqua  text-right pull-right"  (click)='send(button,detail.profile_id)' #button  [ngStyle]="{'background-color':  color}"><span><i class="icon-plus-sign"></i>{{detail.innerHTML}}</span></a>   




  if (detail.connection_status == '') {
                    detail.innerHTML = "connect";
                    this.color = "red";
                }




send(button, index): void {

    var str = localStorage.getItem('social');
    var loc = JSON.parse(str);
    var id = loc.profile_id;
    var formdata = { recieved_id: index, sent_id: id }

    this.color = 'blue';
    var headers = new Headers();

    headers.append('Content-Type', 'application/x-www-form-urlencoded')
    this.http.post('http://localhost/a2server/index.php/requests/sendrequest/', formdata, { headers: headers })
        .subscribe(
        response => {
            if (response.json().error_code == 0) {
                button.innerHTML = "Pending";
                button.disabled = true;
                this.color = "#127bdc";

            }
            else {
                button.innerHTML = "Unable to send request";
            }
        });


}

I am trying to change my button color dynamically but not achieved can someone suggest help

Thierry Templier · Accepted Answer · 2016-08-12 13:03:52Z

4

You can leverage the ngStyle directive:

<a  class="button buttonaquacss button-mini button-aqua  text-right pull-right" 
    [ngStyle]="{'background-color':  color}">
  (...)
</a>

answered Aug 12, 2016 at 13:03

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

6 Comments

Thierry Templier Over a year ago

It should ;-) Could you add the content of your send method into your question? Thanks!

Ervis Trupja Over a year ago

It does not change because you already set the static code here. this.color = "#127bdc"; You should get it from somewhere and not set there.

Thierry Templier Over a year ago

Is the following block executed: if (response.json().error_code == 0) { ... }?

Thierry Templier Over a year ago

So that's the problem. Your button is always blue... Where does the block take place in your component: if (detail.connection_status == '') { ... }?

MMR Over a year ago

That comes with costructor and the condition is always true

|

Wax Cage · Accepted Answer · 2016-08-12 13:05:24Z

0

A simple solution would be using ngStyle ( https://docs.angularjs.org/api/ng/directive/ngStyle ) using directive like this

ng-style="{color: myColor}"

directing to your controller.

answered Aug 12, 2016 at 13:05

Wax Cage

8062 gold badges10 silver badges25 bronze badges

Comments

after-ephemera · Accepted Answer · 2016-08-12 13:32:16Z

0

Another method to solve this problem would be to have a conditional class that overrides the color using [class.newColor]="errorThrown" This holds true to the principle of separating your logic from your styling.

answered Aug 12, 2016 at 13:32

after-ephemera

3812 gold badges4 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to change button color dynamically in angular2

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related