Sets or gets the checked property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [checked]="true">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [disabled]="true">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the height property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

enum SwitchButtonOrientation {
     horizontal,
     vertical
}

Sets or gets the orientation property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [orientation]="''vertical''">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the onLabel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [onLabel]="'On'">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the offLabel property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [offLabel]="'Off'">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the thumbSize property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [thumbSize]="30%">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27" [rtl]="true">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

Sets or gets the width property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    
}

This event is triggered when the switch button is checked.

Code examples

Bind to the checked event of jqxSwitchButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton(onChecked)="Checked($event)"
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    Checked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the switch button's state changes from one state to another.

Code examples

Bind to the change event of jqxSwitchButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton(onChange)="Change($event)"
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    Change(event: any): void 
    {
        // Do Something
    }

    
}
							
						

This event is triggered when the switch button is unchecked.

Code examples

Bind to the unchecked event of jqxSwitchButton.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton(onUnchecked)="Unchecked($event)"
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent {
    Unchecked(event: any): void 
    {
        // Do Something
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySwitchButton.check();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySwitchButton.disable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySwitchButton.enable();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySwitchButton.toggle();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        this.mySwitchButton.uncheck();
    }

    
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxSwitchButton #mySwitchButton
            [width]="81" [height]="27">
        </jqxSwitchButton>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('mySwitchButton') mySwitchButton: jqxSwitchButtonComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.mySwitchButton.val();
    }

    
}