Angular Switch - Getting Started
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
Add DevExtreme to your Angular application and use the following code to create a Switch component:
- <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 { }
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.
- <dx-switch
- [value]="false"
- >
- </dx-switch>
Configure Size
The component allows you to change its width.
You can also use rtlEnabled property to enable the Right-to-Left layout.
- <dx-switch ...
- [width]="80"
- [rtlEnabled]="true"
- >
- </dx-switch>
Define a Hint
The following code specifies the hint that appears when users hover the mouse pointer over the Switch.
- <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";
- // ...
- }
- }
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:
- <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}`);
- }
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.