[CLOSED] Is it possible for toggle to be checked and activate alertpop

Ionic Framework ionic-v3
1

Hi, Is it possible to when trigger the toggle and it wil pop out a alert for user to enter details?
Thankyou in advance.

2

Using the ionChange event of an ion-toggle, you can execute code when the state is changed.
In that function, you can check the value of the ngModel variable and do the according logic.

<ion-toggle[(ngModel)]="cucumber" (ionChange)="updateCucumber()"></ion-toggle>

3

How can I stop the popup when I have click once. I mean I would only like to click once. Sorry and thankyou.

my code for

home.ts

toggleValue: boolean = false;

  activatePopup() {
    if(this.toggleValue = true){
      let prompt = this.alertCtrl.create({
        title: 'Medical Certificate Duration',
        message: "Type in the number of days below",
        inputs: [
          {
            name: 'title',
            placeholder: 'No. Of Days'
          },
        ],
        buttons: [
          {
            text: 'Cancel',
            handler: data => {
              console.log('Cancel clicked');
            }
          },
          {
            text: 'Confirm',
            handler: data => {
              console.log('Saved clicked');
            }
          }
        ]
      });
      prompt.present();
    }
  }

home.html
<ion-col col-4 item-start><ion-toggle (ionChange)="activatePopup()" checked="false" style='zoom:0.8;'></ion-toggle></ion-col>’

i tried using if if(this.toggleValue = true){ prompt.present(); }

4

You can use [disabled] to fix this.
Change the variable at the start of activePopup() and all should be good

<ion-toggle [disabled]="isDisabled"></ion-toggle>

5

sorry with disable it just disable my toggle at start. I just want the popup to appear whenever only when its off to on

6

The boolean linked to [disabled] has to be false when the page is loaded.
Otherwise the toggle will be disabled, which is not helpful

7

Sorry, I might not be cleared. Apologise.

By default it shall not be check, so when I check the toggle button. It should turn check with a popup alert. After that if I would like to switch the toggle button to off, I do not want the popup alert to appear. I tried if statement but does not have any effect.

Thank you.

This is my
home.html

<ion-col col-4 item-start><ion-toggle [disabled]='false' [(ngModel)]="toggleValue" (ionChange)="activatePopup()" style='zoom:0.8;'></ion-toggle></ion-col>

home.ts

toggleValue: boolean = false;

 activatePopup() {
    let prompt = this.alertCtrl.create({
      title: 'Medical Certificate Duration',
      message: "Type in the number of days below",
      inputs: [
        {
          name: 'title',
          placeholder: 'No. Of Days'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Confirm',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });

    if(this.toggleValue = true){
    prompt.present();
  }
  }

UPDATE!!

HOME.ts

toggleValue: boolean = false;

 activatePopup() {
    let prompt = this.alertCtrl.create({
      title: 'Medical Certificate Duration',
      message: "Type in the number of days below",
      inputs: [
        {
          name: 'title',
          placeholder: 'No. Of Days'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Confirm',
          handler: data => {
            console.log('Saved clicked');
          }
        }
      ]
    });

// not sure why need to be "===" and not just a single "="
    if(this.toggleValue === true){
    prompt.present();
  }
  }
8

To answer the last question in your code:

If you use “=”, it will assign the right value to the left value.
When using “==” it will compare both values;
"===" is to check the value and type of the variables if I’m not mistaken. All should match, otherwise it’s false.

In this case, “==” should be enough.
"=" will never work in an if-statement

9

Thankyou so much for the guide! Much appericated.

10

No problem.
Please mark the thread as solved, so other people with the same problem can find the solution fast.