Class 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, multiple and toggle selection.

Example:

<igx-buttongroup multiSelection="true" [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 }];

Hierarchy

Hierarchy

  • DisplayDensityBase
    • IgxButtonGroupComponent

Implements

  • AfterContentInit
  • AfterViewInit
  • OnDestroy

Constructors

Properties

densityChanged: EventEmitter<IDensityChangedEventArgs> = ...
deselected: EventEmitter<IButtonGroupEventArgs> = ...

An

Ouput

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>
id: string = ...

An

Input

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">
multiSelection: boolean = false

An

Input

property that enables selecting multiple buttons. By default, multi-selection is false.

<igx-buttongroup [multiSelection]="false" [alignment]="alignment"></igx-buttongroup>
selected: EventEmitter<IButtonGroupEventArgs> = ...

An

Ouput

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

An

Input

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>

Accessors

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

  • get itemContentCssClass(): string
  • Returns the CSS class of the item content of the IgxButtonGroup.

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

    Returns string

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

    Parameters

    • value: string

    Returns void

Methods