Using a switch requires the Switch module.

import * as switchModule from "tns-core-modules/ui/switch";

Binding the Switch checked property and Button isEnabled property to a observable view-model property.

<Page loaded="pageLoaded">
 <StackLayout orientation="vertical">
   <Switch checked="{{ someProperty }}" />
   <Button isEnabled="{{ someProperty }}" text="This is a Button!" />
function pageLoaded(args) {
    var page = args.object;
    var obj = new observable.Observable();
    obj.set("someProperty", false);
    page.bindingContext = obj;
exports.pageLoaded = pageLoaded;

Creating a switch

var mySwitch = new switchModule.Switch();

Setting the checked property of a switch

mySwitch.checked = true;

Binding checked property to a model

var model = new observable.Observable();
model.set("enabled", true);
var options: bindable.BindingOptions = {
    sourceProperty: "enabled",
    targetProperty: "checked"
mySwitch.bind(options, model);
// mySwitch.checked is now true
model.set("enabled", false);
// mySwitch.checked is now false

Is this article helpful? Yes / No
Thank you for your feedback!

Tell us how we can improve this article

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