An
property that emits an event when a button is deselected.
@ViewChild("toast")
private toast: IgxToastComponent;
public deselectedHandler(buttongroup){
this.toast.open()
}
//...
<igx-buttongroup> #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have deselected a button!</igx-toast>
Gets/Sets the value of the id attribute. If not set it will be automatically generated.
<igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
An
property that emits an event when a button is selected.
@ViewChild("toast")
private toast: IgxToastComponent;
public selectedHandler(buttongroup) {
this.toast.open()
}
//...
<igx-buttongroup #MyChild [selectionMode]="'multi'" (selected)="selectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have made a selection!</igx-toast>
Property that configures the buttons in the button group using a collection of Button objects.
public ngOnInit() {
this.cities = [
new Button({
label: "Sofia"
}),
new Button({
label: "London"
}),
new Button({
label: "New York",
selected: true
}),
new Button({
label: "Tokyo"
})
];
}
//..
<igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>
Returns the alignment of the igx-buttongroup.
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let buttonAlignment = this.buttonG.alignment;
}
Allows you to set the button group alignment.
Available options are ButtonGroupAlignment.horizontal (default) and ButtonGroupAlignment.vertical.
public alignment = ButtonGroupAlignment.vertical;
//..
<igx-buttongroup [selectionMode]="'single'" [values]="cities" [alignment]="alignment"></igx-buttongroup>
A collection containing all buttons inside the button group.
Disables the igx-buttongroup component. By default it's false.
<igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
Returns the theme of the component.
The default theme is comfortable.
Available options are comfortable, cosy, compact.
let componentTheme = this.component.displayDensity;
Sets the theme of the component.
Returns true if the igx-buttongroup alignment is vertical.
Note that in order for the accessor to work correctly the property should be set explicitly.
<igx-buttongroup #MyChild [alignment]="alignment" [values]="alignOptions">
//...
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let orientation = this.buttonG.isVertical;
}
Returns the CSS class of the item content of the IgxButtonGroup.
@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let buttonSelect = this.buttonG.itemContentCssClass;
}
Allows you to set a style using the itemContentCssClass input.
The value should be the CSS class name that will be applied to the button group.
public style1 = "styleClass";
//..
<igx-buttongroup [itemContentCssClass]="style1" [selectionMode]="'multi'" [values]="alignOptions">
Enables selecting multiple buttons. By default, multi-selection is false.
in version 16.1.0. Use the selectionMode property instead.
Gets the selected button/buttons.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let selectedButton = this.buttonG.selectedButtons;
}
Gets/Sets the selection mode to 'single', 'singleRequired' or 'multi' of the buttons. By default, the selection mode is 'single'.
<igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
Sets the --component-size CSS variable based on the value of Display Density
Ignite UI for Angular Button Group - Documentation
The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports single, multi and singleRequired selection.
Example:
The
fontOptionsvalue shown above is defined as: