Sets or gets the disabled property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [disabled]="true">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

Sets or gets the enableHover property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [enableHover]="false">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

enum ButtonGroupMode {
     checkbox,
     radio,
     default
}

Sets or gets the mode property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [mode]="'radio'">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

Sets or gets the rtl property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [rtl]="true">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

enum ButtonGroupTemplate {
     default,
     primary,
     success,
     warning,
     danger,
     info
}

Sets or gets the template property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [template]="'success'">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

Sets or gets the theme property.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup  [theme]="'energyblue'">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    
 
}

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event of jqxButtonGroup.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup (onButtonclick)="Buttonclick($event)">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    Buttonclick(event: any): void 
    {
        // Do Something
    }

    
 
}
							
						

This event is triggered when a button is selected - in checkboxes or radio buttons mode.

Code examples

Bind to the selected event of jqxButtonGroup.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup (onSelected)="Selected($event)">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    Selected(event: any): void 
    {
        // Do Something
    }

    
 
}
							
						

This event is triggered when a button is unselected - in checkbox or radio buttons mode.

Code examples

Bind to the unselected event of jqxButtonGroup.

import { Component } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup (onUnselected)="Unselected($event)">
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent {
    Unselected(event: any): void 
    {
        // Do Something
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.disableAt(1);
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.disable();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.destroy();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.enable();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.enableAt(1);
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.focus();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        let value = this.myButtonGroup.getSelection();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.render();
    }

    
 
}
							
						

import { Component, ViewChild, AfterViewInit } from "@angular/core";
 
@Component({
    selector: "app-root",
    template: `
        <jqxButtonGroup #myButtonGroup >
            <button style="padding: 4px 16px" id='Left' value='Left'></button>
            <button style="padding: 4px 16px" id='Center' value='Center'></button>
            <button style="padding: 4px 16px" id='Right' value='Right'></button>
        </jqxButtonGroup>
    `
})
 
export class AppComponent implements AfterViewInit {
    @ViewChild('myButtonGroup') myButtonGroup: jqxButtonGroupComponent; 
 
    ngAfterViewInit(): void 
    {
        this.myButtonGroup.setSelection(1);
    }

    
 
}