How can I create toggle button for gender in ionic

Question

I am new to ionic and I want to be able to create a gender toggle button in my application. I don't want to use checkbox but convert the checkbox to toogle as the image below.

if I am to build it in html and jQuery it will be this way

<div class="checkbox">
      <input type="checkbox" name="gender" id="gender" checked />
     </div>
    </div>
    <input type="hidden" name="hidden_gender" id="hidden_gender" value="Male" />

In jQuery

 $('#gender').bootstrapToggle({
  on: 'Male',
  off: 'Female',
  onstyle: 'success',
  offstyle: 'danger'
 });

 $('#gender').change(function(){
  if($(this).prop('checked'))
  {
   $('#hidden_gender').val('Male');
  }
  else
  {
   $('#hidden_gender').val('Female');
  }
 });

Thanks.

Possible duplicate of [How can I place text inside an ion-toggle](https://stackoverflow.com/questions/29280945/how-can-i-place-text-inside-an-ion-toggle) — Madhavan.V, Jul 08 '18 at 05:29

score 0 · Answer 1 · answered Jul 08 '18 at 05:35

I think what you're looking for is <ion-toggle/>.

For documentation on this component, see: https://ionicframework.com/docs/components/#toggle

Here's a copy/paste of a line from how I'm using the tag in an Angular application:

<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>

How can I create toggle button for gender in ionic

1 Answers1