IgxButtonGroupComponent

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:

public fontOptions: IButtonGroupButton[] = [
  { label: 'Bold', icon: 'format_bold', selected: false },
  { label: 'Italic', icon: 'format_italic', selected: false },
  { label: 'Underline', icon: 'format_underlined', selected: false }];

Constructors

new IgxButtonGroupComponent(): IgxButtonGroupComponent

Returns IgxButtonGroupComponent

Properties

deselected

deselected: EventEmitter<IButtonGroupEventArgs>

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

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:87

role

Sets/gets the role attribute value.

role: string = 'group'

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

Example

@ViewChild("MyButtonGroup", { read: IgxButtonGroupComponent })
public badge: IgxButtonGroupComponent;

buttonGroup.role = 'group';

selected

selected: EventEmitter<IButtonGroupEventArgs>

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

values

Configures the buttons rendered by the button group using a collection of IButtonGroupButton objects. The buttons are rendered before any buttons projected in the group's content.

The selected flag of each item is kept in sync with the selection state of its button.

values: IButtonGroupButton[] = []

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

Example

public cities: IButtonGroupButton[] = [
    { label: 'Sofia' },
    { label: 'London' },
    { label: 'New York', selected: true },
    { label: 'Tokyo', disabled: true }
];

<igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>

Accessors

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:232

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:219

Parameters

value: ButtonGroupAlignment

Returns void

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:75

Returns IgxButtonDirective[]

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:194

Returns boolean

set disabled(value: boolean): void

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

Parameters

value: boolean

Returns void

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:291

Returns boolean

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:141

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:127

Parameters

value: string

Returns void

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:325

Returns IgxButtonDirective[]

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:152

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:155

Parameters

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

Returns void

Methods

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:409

Parameters

index: number

Returns void

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:342

Parameters

index: number

Returns void

updateDeselected

updateDeselected(index: number): void

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

Parameters

index: number