DevExtreme Angular - Getting Started with ButtonGroup

NOTE
Before starting the tutorial, make sure that you have installed DevExtreme in your application as described in the Installation section (for JavaScript libraries), the Getting Started article (for ASP.NET MVC 5 Controls), or the Configure a Visual Studio Project article (for ASP.NET Core Controls).

The ButtonGroup is a set of toggle buttons that can be used as a mode switcher.

This tutorial describes how to configure basic ButtonGroup features. We create a ButtonGroup that logs the names of the selected buttons into the browser's console (open the console to see them):

Refer to the subtopics for details on every configuration step. You can also see the full code below:

app.component.html
app.component.ts
app.module.ts
  • <dx-button-group
  • [items]="fontStyles"
  • keyExpr="style"
  • selectionMode="multiple"
  • [(selectedItemKeys)]="selectedFontStyleNames"
  • (onSelectionChanged)="logSelectionChanged($event)">
  • </dx-button-group>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • fontStyles: Array<{ icon: string, style: string }> = [{
  • icon: "bold",
  • style: "bold"
  • }, {
  • icon: "italic",
  • style: "italic"
  • }, {
  • icon: "underline",
  • style: "underline"
  • }, {
  • icon: "strike",
  • style: "strike"
  • }];
  •  
  • selectedFontStyleNames: string[] = [ "italic" ];
  •  
  • constructor() {
  • this.logSelectionChanged = this.logSelectionChanged.bind(this);
  • }
  •  
  • logSelectionChanged() {
  • let message;
  • if(this.selectedFontStyleNames.length > 0) {
  • message = "The following styles are selected: " + this.selectedFontStyleNames.join(", ");
  • } else {
  • message = "There are no selected styles";
  • }
  • console.log(message);
  • }
  • }
  • 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 { }

Create the ButtonGroup

You can use the following library- or framework-specific code to create the ButtonGroup:

app.component.html
app.component.ts
app.module.ts
  • <dx-button-group
  • <!-- Configuration goes here -->
  • >
  • </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 { }

Add Buttons to the ButtonGroup

Buttons are configured by objects that can contain custom fields and fields from the default item template. For instance, the fontStyles array in the following code has four data objects with one default item template field (icon) and one custom field (style) each.

NOTE
Default item templates allow you to control item appearance via data objects. Refer to the Default Templates article for more information.

Assign the array to the items option and use the keyExpr to specify style as the key field. We log the field's values into the console at a later step.

app.component.html
app.component.ts
  • <dx-button-group
  • [items]="fontStyles"
  • keyExpr="style">
  • </dx-button-group>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • fontStyles: Array<{ icon: string, style: string }> = [{
  • icon: "bold",
  • style: "bold"
  • }, {
  • icon: "italic",
  • style: "italic"
  • }, {
  • icon: "underline",
  • style: "underline"
  • }, {
  • icon: "strike",
  • style: "strike"
  • }];
  • }

If you run the code, you should see a ButtonGroup that contains four buttons but nothing happens when you click any of them.

Preselect a Button

Populate the selectedItemKeys array with the keys of the buttons that should be preselected. In this tutorial, we add the "italic" button to this array.

app.component.html
app.component.ts
  • <dx-button-group ...
  • [(selectedItemKeys)]="selectedFontStyleNames">
  • </dx-button-group>
  • // ...
  • export class AppComponent {
  • // ...
  • selectedFontStyleNames: string[] = [ "italic" ];
  • }

If you run the code now, you should see the "italic" button initially selected.

Handle the Selection Change Event

Assign a function to the onSelectionChanged option. In this tutorial, the function logs the added or removed style's name to the browser's console:

app.component.html
app.component.ts
  • <dx-button-group ...
  • (onSelectionChanged)="logSelectionChanged($event)">
  • </dx-button-group>
  • // ...
  • export class AppComponent {
  • // ...
  • logSelectionChanged(e) {
  • if(e.addedItems[0]) {
  • console.log("The following style is added: " + e.addedItems[0].style);
  • }
  • if(e.removedItems[0]) {
  • console.log("The following style is removed: " + e.removedItems[0].style)
  • }
  • }
  • }

Run the code, open the browser's console, and select or clear the button selection in the ButtonGroup. You should see messages like the following:

  • The following style is added: underline
  • The following style is removed: bold

Enable Multiple Selection

Set the selectionMode option to "multiple" to allow users to select multiple buttons. You can also change the onSelectionChanged handler from the previous step to log all the selected styles in the console:

app.component.html
app.component.ts
  • <dx-button-group ...
  • selectionMode="multiple"
  • [(selectedItemKeys)]="selectedFontStyleNames"
  • (onSelectionChanged)="logSelectionChanged($event)">
  • </dx-button-group>
  • // ...
  • export class AppComponent {
  • // ...
  • selectedFontStyleNames: string[] = [ "italic" ];
  •  
  • constructor() {
  • this.logSelectionChanged = this.logSelectionChanged.bind(this);
  • }
  •  
  • logSelectionChanged() {
  • let message;
  • if(this.selectedFontStyleNames.length > 0) {
  • message = "The following styles are selected: " + this.selectedFontStyleNames.join(", ");
  • } else {
  • message = "There are no selected styles";
  • }
  • console.log(message);
  • }
  • }

Now you should be able to select multiple buttons and see messages like the following in the console:

  • The following styles are selected: bold, underline, strike

You have configured basic ButtonGroup features. To take a more detailed look at this widget, explore the following resources: