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:

<igx-buttongroup selectionMode="multi" [values]="fontOptions">
</igx-buttongroup>

The fontOptions value shown above is defined as:

this.fontOptions = [
  { icon: 'format_bold', selected: false },
  { icon: 'format_italic', selected: false },
  { icon: 'format_underlined', selected: false }];

Constructors

Section titled "Constructors"

IgxButtonGroupComponent 

new IgxButtonGroupComponent(): IgxButtonGroupComponent

Returns IgxButtonGroupComponent

Properties

Section titled "Properties"

deselected

Section titled "deselected"

An

 
deselected: EventEmitter<IButtonGroupEventArgs>

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:258

id

Section titled "id"

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">
id: string

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:67

selected

Section titled "selected"

An

 
selected: EventEmitter<IButtonGroupEventArgs>

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:240

values

Section titled "values"

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>
values: any

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:173

Accessors

Section titled "Accessors"

alignment

Section titled "alignment"

Returns the alignment of the igx-buttongroup.

@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let buttonAlignment = this.buttonG.alignment;
}
get alignment(): ButtonGroupAlignment

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:220

Returns ButtonGroupAlignment

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>
set alignment(value: ButtonGroupAlignment): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:207

Parameters

Returns void

buttons

Section titled "buttons"

A collection containing all buttons inside the button group.

 
get buttons(): IgxButtonDirective[]

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:55

Returns IgxButtonDirective[]

disabled

Section titled "disabled"

Disables the igx-buttongroup component. By default it's false.

<igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
get disabled(): boolean

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:182

Returns boolean 

set disabled(value: boolean): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:185

Parameters

  • value: boolean

Returns void

isVertical

Section titled "isVertical"

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;
}
get isVertical(): boolean

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:278

Returns boolean

itemContentCssClass

Section titled "itemContentCssClass"

Returns the CSS class of the item content of the button group.

@ViewChild("MyChild")
public buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let buttonSelect = this.buttonG.itemContentCssClass;
}
get itemContentCssClass(): string

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:101

Returns string

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">
set itemContentCssClass(value: string): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:87

Parameters

  • value: string

Returns void

multiSelection

Section titled "multiSelection"

Enables selecting multiple buttons. By default, multi-selection is false.

 
get multiSelection(): boolean

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:111

Returns boolean 

set multiSelection(selectionMode: boolean): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:118

Parameters

  • selectionMode: boolean

Returns void

selectedButtons

Section titled "selectedButtons"

Gets the selected button/buttons.

@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   let selectedButton = this.buttonG.selectedButtons;
}
get selectedButtons(): IgxButtonDirective[]

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:312

Returns IgxButtonDirective[]

selectionMode

Section titled "selectionMode"

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>
get selectionMode(): "single" | "multi" | "singleRequired"

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:133

Returns "single" | "multi" | "singleRequired" 

set selectionMode(selectionMode: "single" | "multi" | "singleRequired"): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:136

Parameters

  • selectionMode: "single" | "multi" | "singleRequired"

Returns void

Methods

Section titled "Methods"

deselectButton

Section titled "deselectButton"

Deselects a button by its index.

@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   this.buttonG.deselectButton(2);
   this.cdr.detectChanges();
}
deselectButton(index: number): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:397

Parameters

  • index: number

Returns void

selectButton

Section titled "selectButton"

Selects a button by its index.

@ViewChild("MyChild")
private buttonG: IgxButtonGroupComponent;
ngAfterViewInit(){
   this.buttonG.selectButton(2);
   this.cdr.detectChanges();
}
selectButton(index: number): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:329

Parameters

  • index: number

Returns void

updateDeselected

Section titled "updateDeselected" 
updateDeselected(index: number): void

Defined in projects/igniteui-angular/button-group/src/button-group/button-group.component.ts:369

Parameters

  • index: number

Returns void