Collection of Buttons

The ButtonGroup enables you to render multiple Button components by iterating a collection of configuration objects.

The following example demonstrates this in action. It utilizes the selectedChange event of each button to execute custom logic when the button state is changed.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <div class="teamMate">
      <img [src]="img" alt="Nancy Leverling" />
      <span
        class="k-icon k-i-circle status"
        [ngStyle]="{ color: status }"
      ></span>
      <span class="mate-info">
        <h2>Nancy Leverling</h2>
        <p>Team Lead</p>
      </span>
    </div>

    <kendo-buttongroup [width]="'100%'" [selection]="'single'">
      <button
        *ngFor="let button of buttons"
        kendoButton
        [toggleable]="true"
        [selected]="button.selected"
        (selectedChange)="selectedChange($event, button)"
      >
        <span>
          <span class="k-icon {{ button.icon }}"></span>
          {{ button.text }}
        </span>
      </button>
    </kendo-buttongroup>
  `,
  encapsulation: ViewEncapsulation.None,
  styles: [
    `
      .status {
        margin-left: -22px;
        padding-top: 1px;
        font-size: 25px;
      }
      .teamMate h2 {
        font-size: 1.3em;
        font-weight: normal;
        padding-top: 17px;
        margin: 0;
      }
      .teamMate p {
        margin: 0;
        font-size: 0.8em;
      }
      .teamMate img {
        display: inline-block;
        vertical-align: top;
        width: 50px;
        height: 50px;
        margin: 10px;
        border: 1px solid #ccc;
        border-radius: 50%;
      }
      .mate-info {
        display: inline-block;
        vertical-align: top;
      }
    `
  ]
})
export class AppComponent {
  public status = '#10b507';
  public buttons = [
    { text: 'Away', icon: 'k-i-clock', color: '#f0c505' },
    { text: 'Available', icon: 'k-i-check-circle', color: '#10b507', selected: true },
    { text: 'Offline', icon: 'k-i-close-circle', color: '#707070' },
    { text: 'Do not disturb', icon: 'k-i-minus-circle', color: '#e30000' }
  ];
  private img = 'https://demos.telerik.com/kendo-ui/content/web/panelbar/nancy.jpg';

  public selectedChange(e, btn) {
    this.status = btn.color;
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Storing the Selection

The ButtonGroup allows you to track which buttons are selected by storing the selection in a custom collection.

To enable this behavior:

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { NotificationService } from '@progress/kendo-angular-notification';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">Selected Days: {{ selectedDays | json }}</div>
    <div class="row">
        <div class="col-sm-12 col-md-4 example-col">
            <p>Days</p>
            <kendo-buttongroup [selection]="'multiple'">
            <button
                *ngFor="let button of buttons"
                kendoButton
                [toggleable]="true"
                (selectedChange)="selectedChange($event, button)"
            >
                {{ button.text }}
            </button>
            </kendo-buttongroup>
        </div>
    </div>

    <p>Notification container</p>
    <div
      class="append-container"
      #container
      style=" height: 150px; border: 1px solid black;"
    ></div>
  `
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef })
  public container: ViewContainerRef;
  public buttons = [
    { text: 'Monday', index: 0 },
    { text: 'Tuesday', index: 1 },
    { text: 'Wednesday', index: 2 },
    { text: 'Thursday', index: 3 },
    { text: 'Friday', index: 4 },
    { text: 'Saturday', index: 5 },
    { text: 'Sunday', index: 6 }
  ];

  private selectedDays = [];

  constructor(private notificationService: NotificationService) { }

  public selectedChange(isTrue, day) {
    if (isTrue) {
      this.selectedDays.push(day.index);
    } else {
      const index = this.selectedDays.indexOf(day.index);
      this.selectedDays.splice(index, 1);
    }
    this.selectedDays.sort((a, b) => a - b);
    this.show(isTrue, day);
  }

  public show(isChecked, day): void {
    if (isChecked) {
      this.showNotification(isChecked, day);
    } else {
      this.showNotification(isChecked, day);
    }
  }

  // Show notification
  public showNotification(checked, day) {
    this.notificationService.show({
      content: `${day.text} was ${checked ? 'selected' : 'deselected'}`,
      appendTo: this.container,
      position: { horizontal: 'left', vertical: 'top' },
      animation: { type: 'fade', duration: 300 },
      type: { style: `${checked ? 'success' : 'info'}`, icon: true },
      hideAfter: 5000
    });
  }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { NotificationModule } from '@progress/kendo-angular-notification';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, BrowserAnimationsModule, ButtonsModule, NotificationModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article