Angular Switch - Getting Started

jQuery

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Angular

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

Vue

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

React

NOTE

Before you start the tutorial, ensure DevExtreme is installed in your application.

The Switch component allows users to switch between ON (the value is true) and OFF (the value is false) states.

This tutorial shows how to add Switch to a page and configure its core features. The following sample shows the customization result:

Each section in this tutorial describes a single configuration step. You can also find the full source code in the following GitHub repository: getting-started-with-switch.

Create a Switch

jQuery

Add DevExtreme to your jQuery application and use the following code to create a Switch component:

index.js

index.html

$(function() {
    $("#switch").dxSwitch({ });
});

<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_23_2/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_23_2/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="switch"></div>
    </body>
</html>

Angular

Add DevExtreme to your Angular application and use the following code to create a Switch component:

app.component.html

app.component.ts

app.module.ts

<dx-switch></dx-switch>

import { Component } from "@angular/core";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {

}

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

import { DxSwitchModule } from "devextreme-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSwitchModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

Add DevExtreme to your Vue application and use the following code to create a Switch component:

App.vue

<template>
    <DxSwitch>
    </DxSwitch>
</template>

<script>
import "devextreme/dist/css/dx.light.css";
import { DxSwitch } from "devextreme-vue/switch";

export default {
    components: {
        DxSwitch
    }
}
</script>

React

Add DevExtreme to your React application and use the following code to create a Switch component:

App.js

import React from "react";
import "devextreme/dist/css/dx.light.css";
import { Switch } from "devextreme-react/switch";

function App() {
    return (
        <Switch>
        </Switch>
    );
}

export default App;

Specify the Initial State

If you need to specify the initial state, assign a Boolean value to the value property. You can also change the Switch component labels. Use the switchedOnText and the switchedOffText properties.

jQuery

index.js

$(function() {
    $("#switch").dxSwitch({
        value: false,
    });
});

Angular

app.component.html

<dx-switch
    [value]="false"
>
</dx-switch>

Vue

App.vue

<template>
    <DxSwitch
        :value="false"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    // ...
    return (
        <Switch
            value={false}
        />
    );
}

export default App;

Configure Size

The component allows you to change its width.

You can also use rtlEnabled property to enable the Right-to-Left layout.

jQuery

index.js

$(function() {
    $("#switch").dxSwitch({
        // ...
        width: 80,
        rtlEnabled: true,
    });
});

Angular

app.component.html

<dx-switch ...
    [width]="80"
    [rtlEnabled]="true"
>
</dx-switch>

Vue

App.vue

<template>
    <DxSwitch ...
        :width="80"
        :rtlEnabled="true"
    />
</template>

<script>
// ...
</script>

React

App.js

// ...

function App() {
    // ...
    return (
        <Switch ...
            width={80}
            rtlEnabled={true}
        />
    );
}

export default App;

Define a Hint

The following code specifies the hint that appears when users hover the mouse pointer over the Switch.

jQuery

index.js

$(function() {
    $("#switch").dxSwitch({
        // ...
        hint: "Click to switch on",
        onValueChanged(e) {
            const messageText= e.value ? "Click to switch off" : "Click to switch on";
            e.component.option("hint", messageText);
            // ...
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-switch ...
    [hint]="hintMessage"
    (onValueChanged)="onValueChanged($event)"
>
</dx-switch>

import { Component } from "@angular/core";
// ...

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    hintMessage: string = "Click to switch on";
    onValueChanged(e: {value: boolean}) {
        this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
        // ...
    }
}

Vue

App.vue

<template>
    <DxSwitch ...
        :hint="hintMessage"
        @value-changed="onValueChanged"
    />
</template>

<script>
import { DxSwitch } from "devextreme-vue/switch";
// ...

export default {
    components: {
        DxSwitch
    },
    data() {
        return {
            hintMessage: "Click to switch on",
        };
    },
    methods: {
        onValueChanged(e) {
            this.hintMessage = e.value ? "Click to switch off" : "Click to switch on";
            // ...
        }
    }
}
</script>

React

App.js

import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";

import { Switch } from "devextreme-react/switch";

function App() {
    const [hintMessage, setHintMessage] = useState("Click to switch on");

    const onValueChanged = useCallback((e) => {
        const messageText = e.value ? "Click to switch off" : "Click to switch on";
        setHintMessage(messageText);
        // ...
    }, []);

    return (
        <Switch ...
            hint={hintMessage}
            onValueChanged={onValueChanged}
        />
    );
}

export default App;

Handle Value Change

Users can change a component value (state) with a mouse click, SPACE key, or tap. Implement the onValueChanged callback to handle value changes.

The following code displays a notification every time users change the Switch state:

jQuery

index.js

$(function() {
    $("#switch").dxSwitch({
        // ...
        onValueChanged(e) {
            // ...
            const stateLabel = e.value ? "ON" : "OFF";
            DevExpress.ui.notify(`The component is switched ${stateLabel}`); 
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-switch ...
    (onValueChanged)="onValueChanged($event)"
>
</dx-switch>

import { Component } from "@angular/core";
import notify from "devextreme/ui/notify";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    // ...
    onValueChanged(e: {value: boolean}) {
        // ...
        const stateLabel = e.value ? "ON" : "OFF";
        notify(`The component is switched ${stateLabel}`); 
    }
}

Vue

App.vue

<template>
    <DxSwitch ...
        @value-changed="onValueChanged"
    />
</template>

<script>
// ...
import { DxSwitch } from "devextreme-vue/switch";
import notify from "devextreme/ui/notify";

export default {
    components: {
        DxSwitch
    },
    // ...
    methods: {
        onValueChanged(e) {
            // ...
            const stateLabel = e.value ? "ON" : "OFF";
            notify(`The component is switched ${stateLabel}`);
        }
    }
}
</script>

React

App.js

import React, { useState, useCallback } from "react";
import "devextreme/dist/css/dx.light.css";

import { Switch } from "devextreme-react/switch";
import notify from "devextreme/ui/notify";

function App() {
    // ...
    const onValueChanged = useCallback((e) => {
        // ...
        const stateLabel = e.value ? "ON" : "OFF";
        notify(`The component is switched ${stateLabel}`); 
    }, []);

    return (
        <Switch ...
            onValueChanged={onValueChanged}
        />
    );
}

export default App;