Switch

The switch component allows users to toggle a control between two states. The default state of the component is off, or false, however you can change the state by setting the checked property to a boolean value. To handle the state change event you can use the checkedChange property, which notifies the app when the value has changed. Another useful feature of the component is the isEnable property, which gives the functionality to make the component inactive.

API Reference for the Switch Class

Native Component

Android iOS
android.widget.Switch UISwitch

Image

Basic Switch

HTML

<GridLayout rows="auto auto" columns="* *" class="m-5">
    <Label class="h3 m-15" [text]="firstSwitchState" textWrap="true" row="0" col="0"></Label>
    <Switch class="m-15" checked="false" (checkedChange)="onFirstChecked($event)" row="0" col="1"></Switch>
    <Label class="h3 m-15" [text]="secondSwitchState" textWrap="true" row="1" col="0"></Label>
    <Switch class="m-15" checked="true" (checkedChange)="onSecondChecked($event)" row="1" col="1"></Switch>
</GridLayout>

Handle checkedChange event and setting default value.

import { Component } from "@angular/core";
import { Switch } from "ui/switch";

@Component({
    moduleId: module.id,
    templateUrl: "./basic-switch.component.html",
    styleUrls: ["./../switch.style.css"],
})
export class BasicSwitchComponent {
    public firstSwitchState = "OFF";
    public secondSwitchState = "ON";

    public onFirstChecked(args) {
        let firstSwitch = <Switch>args.object;
        if (firstSwitch.checked) {
            this.firstSwitchState = "ON";
        } else {
            this.firstSwitchState = "OFF";
        }
    }

    public onSecondChecked(args) {
        let secondSwitch = <Switch>args.object;
        if (secondSwitch.checked) {
            this.secondSwitchState = "ON";
        } else {
            this.secondSwitchState = "OFF";
        }
    }
}

Improve this document

Demo Source


Disable Switch

Set Switch in HTML code. Disable Switch control via setting isEnabled property to false.

<GridLayout rows="auto auto" columns="* *" class="m-5">
    <Label row="0" col="0" 
        [text]="switch.isEnabled ? 'enabled' : 'disabled'"
        textWrap="true" class="h3 m-15"></Label>
    <Switch #switch class="m-15" row="0" col="1"></Switch>

    <Button row="3" col="0" colSpan="2" 
        [text]="switch.isEnabled ? 'Disable switch' : 'Enable switch'"
        (tap)="switch.isEnabled = !switch.isEnabled"
        horizontalAlignment="stretch" class="btn btn-primary btn-active"></Button>
</GridLayout>

Improve this document

Demo Source


Styling Switch

HTML

<GridLayout rows="auto auto auto" columns="* auto" class="m-5">
    <Label class="h3 m-15" [text]="switch1.checked" textWrap="true" row="0" col="0"></Label>
    <Switch #switch1 class="m-15 firstSwitchStyle" checked="true"
        (checkedChange)="switch1.checked"
        row="0" col="1"></Switch>

    <Label class="h3 m-15" [text]="switch2.checked" textWrap="true" row="1" col="0"></Label>
    <Switch #switch2 class="m-15 secondSwitchStyle" checked="false"
        (checkedChange)="switch2.checked"
        row="1" col="1"></Switch>

    <Label class="h3 m-15" [text]="switch3.checked" textWrap="true" row="2" col="0"></Label>
    <Switch #switch3 class="m-15 thirdSwitchStyle" checked="true"
        (checkedChange)="switch3.checked"
        row="2" col="1"></Switch>
</GridLayout>

CSS

.firstSwitchStyle{
    background-color: #FFFF66;
}

.secondSwitchStyle{
    background-color: #CCFFFF;
}

.thirdSwitchStyle{
    opacity: 0.5;
    background-color: #8C489F;
}

Improve this document

Demo Source


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.