CODEWITHSUNDEEP
javascriptaurelia
raduken
raduken

Reputation: 2119

Aurelia.js change button color or class after click

Aurelia.js Changing button color or class after click.

How can do this with Aurelia? change from primary to danger after click on this button?

thank you.

html:

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-danger">Danger</button>

Upvotes: 0

Views: 829

Answers (1)

Alex Parra
Alex Parra

Reputation: 56

You need to set a class binding and a click binding.

Bindings:
http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-basics

Basic example: 

//view.html
<button type="button" class="btn ${clicked ? 'btn-danger' : 'btn-primary'}" click.trigger="handleClick()">Click</button>

//view.js
...
  clicked = false;

  handleClick(){
    this.clicked = !this.clicked; // toggle clicked true/false
    return true; // only needed if you want to cancel preventDefault()
  }

If you want, you can get a similar result by binding the style directly.

Upvotes: 1

Related Questions