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()
}
}