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 [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have deselected a button!</igx-toast>
An
property that sets the value of the id attribute. If not set it will be automatically generated.
<igx-buttongroup [id]="'igx-dialog-56'" [multiSelection]="!multi" [values]="alignOptions">
An
property that enables selecting multiple buttons. By default, multi-selection is false.
<igx-buttongroup [multiSelection]="false" [alignment]="alignment"></igx-buttongroup>
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 [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
<igx-toast #toast>You have made a selection!</igx-toast>
An
property that allows setting the buttons in the button group.
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 [multiSelection]="false" [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 [multiSelection]="false" [values]="cities" [alignment]="alignment"></igx-buttongroup>
A collection containing all buttons inside the button group.
An
property that allows you to disable the igx-buttongroup component. By default it's false.
<igx-buttongroup [disabled]="true" [multiSelection]="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" [multiSelection]="!multi" [values]="alignOptions">
Gets the selected button/buttons.
@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
let selectedButton = this.buttonG.selectedButtons;
}
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, multiple and toggle selection.
Example:
The
fontOptionsvalue shown above is defined as: