[Solved] Button Styles and Actions in One Line

Ionic Framework ionic-v3
1

This is my current button code:

<button ion-button color="primary">Toggle Menu</button>

The button section of the Ionic tutorial doesn’t show you how to do an action and style the button, like this:

<button ion-button menuToggle>Toggle Menu</button>

Is there any way to kind of merge both?!

2

You can bind the color property to its component using Angular’s Two-Way Binding.

To tell Angular that you want to bind the color property, wrap it in square brackets and set its value to a variable in your component:

<button ion-button [color]="myColorVariable" menuToggle>Toggle Menu</button>

Now, you can manipulate the variable from within the controller:

export class ComponentPage {
   myColorVariable: string = 'primary';

   ...

   // Call this function to trigger the change.
   changeFunction () {
      this.myColorVariable = 'dark';
   }
}

For extra reference related to this, take some time to read this.

1 Like