User Defined Toggle including preventDefault() and Alert call

Ionic Framework ionic-v3
1

For those having trouble with the Toggle component.

The motivation was that when I call an Alert after a Toggle click event, preventDefault() does not work and ion-toggle toggles before the alert is displayed.

With this new component I have full control and customization over it. Additionally, it suports multiple switches in a template. I do not know if it is coded with the best programming practices but it works.

Hope helps somebody


    // 1) Import NewSwitchComponent in the app.module.ts file
    //
    // 2) In the compoment that uses NewSwitchComponent
    //
    // a) Add to the typescript file in the class before the constructor
    //      switchesArray = [0,1,2]
    //
    // b) Add to the HTML file
    //      <new-switch *ngFor="let switch of switchesArray; let i = index"
    //          [switchIndex]="i"
    //      >
    //      </new-switch>


import { Component, OnInit, Input } from '@angular/core'
import { AlertController } from 'ionic-angular'

@Component({
  selector: 'new-switch',
  template: `
        <label class="switch">
            <input type="checkbox" [checked]="checked" id="dynamicSwitchName">
            <span class="slider round"></span>
        </label>
        `,
  styles: [`

        .switch {
            position: relative;
            display: inline-block;
            width: 51px;
            height: 32px;
        }

        .switch input {display:none;}

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            -webkit-transition: .3s;
            transition: .3s;
        }

        .slider:before {
            position: absolute;
            content: "";
            height: 28px;
            width: 28px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            -webkit-transition: .3s;
            transition: .3s;
            border-radius: 50%;
        }

        input:checked + .slider {
            background-color: #488aff;
        }

        input:focus + .slider {
            box-shadow: 0 0 1px #488aff;
        }

        input:checked + .slider:before {
            -webkit-transform: translateX(19px);
            -ms-transform: translateX(19px);
            transform: translateX(19px);
        }

        .slider.round {
            border-radius: 19px;
        }

        .slider.round:before {
            border-radius: 50%;
        }

  `]
})

export class NewSwitchComponent implements OnInit {

    @Input() switchIndex: string

    checked: boolean

    constructor( public alerCtrl: AlertController ) {

    }

    ngOnInit() {

       // Plain JS - Dynamic function name for each switch

       let fileName: string  = 'SwitchToggleBefore'.concat(this.switchIndex);
       document.getElementById("dynamicSwitchName").setAttribute("id",fileName);
       document.getElementById(fileName).setAttribute("onclick",fileName+"(event)");

       (<any>window)[fileName] = (e) => {
         e.preventDefault();
         this.SwitchToggle();
       };

    }

    SwitchToggle() {

        let confirm = this.alerCtrl.create({
          title: `Alert Title `.concat(this.switchIndex),
          message: `Alert Message`,
          enableBackdropDismiss: false,
          buttons: [
            {
              text: 'Off',
              handler: () => {
                this.checked = false;
              }
            },
            {
              text: 'On',
              handler: () => {
                this.checked = true;
              }
            }
          ]
        })
        confirm.present()
    }

}