Change button text or button color onclick ionic v3

Ionic Framework ionic-v3
1

Hello,

I wanted to make a form with buttons. When someone click on a button a radio dialog appear, and when he have finished to choose his answer the button become green, or his answer is written on the button (the one that call doradio() )

I don’t know how to do this, i’m using Ionic v3.2.

Here is my html :

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Urbain</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h3>Urbain</h3>

  <p>
    Veuillez remplir votre cas :
  </p>

  
    <ion-row>
      <ion-col>
        <p>Choisir la circulation :</p>
      </ion-col>
      <ion-col>
        <button ion-button block (click)="doRadio()">Three</button>
      </ion-col>
      <ion-col>
        <button ion-button block (click)="validation()">Test valid</button>
      </ion-col>
    </ion-row>

</ion-content>

And here is my .ts :

import { Component } from '@angular/core';
import { AlertController, NavController } from 'ionic-angular';

@Component({
  selector: 'page-urbain',
  templateUrl: 'urbain.html'
})
export class UrbainPage {
  testRadioOpen: boolean;
  testRadioResult;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController) {

  }

  doRadio() {
    let alert = this.alertCtrl.create();
    alert.setTitle('Lightsaber color');

    alert.addInput({
      type: 'radio',
      label: 'Blue',
      value: 'blue',
      checked: true
    });

    alert.addInput({
      type: 'radio',
      label: 'Green',
      value: 'green'
    });

    alert.addInput({
      type: 'radio',
      label: 'Red',
      value: 'red'
    });

    alert.addInput({
      type: 'radio',
      label: 'Yellow',
      value: 'yellow'
    });

    alert.addInput({
      type: 'radio',
      label: 'Purple',
      value: 'purple'
    });

    alert.addInput({
      type: 'radio',
      label: 'White',
      value: 'white'
    });

    alert.addInput({
      type: 'radio',
      label: 'Black',
      value: 'black'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Ok',
      handler: data => {
        console.log('Radio data:', data);
        this.testRadioOpen = false;
        this.testRadioResult = data;
      }
    });

    alert.present().then(() => {
      this.testRadioOpen = true;
    });
  }

    validation(){
          alert("La valeur:" + this.testRadioResult); 
    }
}
2

Could you please tell me where the form is? :smiley: I don’t see a form anywhere. I think you want to do something like this.

in your class:

my_variable: string = 'pink';

validation() {
    if(testRadioResult) {
        my_variable = 'green';
    }
}

<button ion-button block (click)="validation()" color="my_variable">Test valid</button>

3

There is no form, it’s just like it.

Yes it’s what i want, but i tried your solution, it don’t works.

My button don’t even take the color from my_variable… :confused:

4

My mistake. That’s not going to work. There’s a good explanation over here:

1 Like
5

Nice ! Thank you very much ! I was searching since yesterday, you saved my day :slight_smile: