Angular ButtonGroup - items

Configures buttons in the group.

Selector: dxi-item

The items array can contain:

  • Objects with fields described in this section
  • Objects with any other fields. In this case, specify the buttonTemplate.

If you need to update the UI component items, reassign the entire items[] array as shown in the following example:

JavaScript
  • buttonGroupInstance.option('items', newItems);
See Also

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the global attributes to be attached to the button group item's container element.

Selector: dxo-element-attr
Type:

Object

app.component.html
app.component.ts
app.module.ts
  • <dx-button-group ...
  • [items]="buttonGroupItems>
  • </dx-button-group>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • buttonGroupItems = [{
  • // ...
  • elementAttr: {
  • class: "class-name"
  • }
  • }, // ...
  • ]
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxButtonGroupModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxButtonGroupModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

hint

Specifies a text for the hint that appears when the button is hovered over or long-pressed.

Type:

String

icon

Specifies the icon to be displayed on the button.

Type:

String

This property accepts one of the following:

View Demo

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular and Vue use custom templates instead of the template property. In React, specify the render or component properties.

app.component.html
app.component.ts
app.module.ts
  • <dx-button-group ... >
  • <dxi-item ... >
  • <div *dxTemplate>
  • <div>Custom Item</div>
  • </div>
  • </dxi-item>
  • </dx-button-group>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • // ...
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxButtonGroupModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxButtonGroupModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }

View on GitHub

See Also

text

Specifies text displayed for the UI component item.

Type:

String

type

Specifies the button type.

Type:

ButtonType

Default Value: 'normal'

DevExtreme provides the following button types.

Button Types

View Demo

visible

Specifies whether or not a UI component item must be displayed.

Type:

Boolean

Default Value: true