Control a toggle button through another button

Ionic Framework ionic-v3
1

I have a toggle button which is working, i just want to create a button that will only interect with the toggle, when i click the button the toggle will go on, when i click again in the button the toggle will go off.

Toggle.html

<ion-toggle class="toggle-small" toggle-class="toggle-calm" id="toggle" (ionChange)="add(ioToggle.checked)"  #ioToggle ></ion-toggle>

Is there a way to do it ?

2

use the bind provided by Angular just like this:
<ion-toggle> [value]="checked" (ionChange)="Clicked()" ></ion-toggle> // html

toggle the “button” will update the value attribute:

checked : boolean = false;
constructor() { }

Clicked() {
  this.checked = !this.checked;
}
3

Hello,
take a look to @Viewchild to fetch any element or component from html, then you can manipulate it in .ts in any way.

Or you bind a variable to toogle ngmodel, that will be changed from button click.

Best regards, anna-liebt

4

I want to create a button, as soon as i click on the button, the toggle will go on, if i click again it goes off.

The button will simulate a click on the toggle

5

Anna that what i want to do,
Please allow me to be more specific about what i want to do. I want to create a button that will simulate my click on the toggle ( i will hide the toggle ), imagine when i click on the button for the first time the toggle wil be on, if i click again it will go off …

6

Please take a look at this image https://i.imgur.com/eEdIOhK.png

I want when i click on the hand button the toggle will go on, and when i click again the the hand button the toggle will go off.

7

Hello,
look here for a example with ngmodel.

Best regards, anna-liebt

1 Like