All Components

Buttons Overview

The Buttons provide a clickable UI functionality with arbitrary content.

The package includes the following components:

  • Button—Represents a directive that can be applied on a <button></button> element. Buttons can be temporarily enabled and disabled depending on the business logic of your project. They can also accommodate background, image, and font icons, which provide a meaningful context and help you to send your message across much more easily.
  • ButtonGroup—Contains a number of Button instances that can be initialized and controlled simultaneously.
  • DropDownButton—Has the appearance of a button. When you click on it, it shows a popup list with items.
  • SplitButton—Allows the user to execute a default action that is bound to a Button or to choose from a list of actions displayed in a drop-down list.

Basic Usage

The following example demonstrates the Button, ButtonGroup, DropDownButton, and SplitButton components in action.

@Component({
    selector: 'my-app',
    styles: ['.example-wrapper,.example-col{ vertical-align: top; }'],
    template: `
        <div class="example-wrapper">
            <div class="example-col">
              <p>Button</p>
              <button kendoButton (click)="onButtonClick()">Default</button>
              <button kendoButton (click)="onButtonClick()" [primary]="true">Primary</button>
              <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled</button>
            </div>
            <div class="example-col">
              <p>ButtonGroup</p>
              <kendo-buttongroup>
                <button kendoButton [togglable]="true">
                  Option A
                </button>
                <button kendoButton [togglable]="true">
                  Option B
                </button>
                <button kendoButton [togglable]="true">
                  Option C
                </button>
              </kendo-buttongroup>
            </div>
            <div class="example-col">
                <p>DropDownButton</p>
                <kendo-dropdownbutton [data]="dropDownButtonItems" [icon]="'cog'" (itemClick)="onSplitButtonItemClick($event)">User Settings</kendo-dropdownbutton>
            </div>
            <div class="example-col">
                <p>SplitButton</p>
                <kendo-splitbutton [data]="splitButtonItems" [icon]="'paste'" (itemClick)="onSplitButtonItemClick($event)" (buttonClick)="onSplitButtonClick()">Paste</kendo-splitbutton>
            </div>
        </div>
    `
})

class AppComponent {
    imageUrl: string = 'http://demos.telerik.com/kendo-ui/content/shared/icons/sports/snowboarding.png';

    splitButtonItems: Array<any> = [{
        text: 'Keep Text Only',
        icon: 'paste-plain-text',
        click: () => { console.log('Keep Text Only click handler'); }
    }, {
        text: 'Paste as HTML',
        icon: 'paste-as-html'
    }, {
        text: 'Paste Markdown',
        icon: 'paste-markdown'
    }, {
        text: 'Set Default Paste'
    }];

    dropDownButtonItems: Array<any> = [{
        text: 'My Profile'
    }, {
        text: 'Friend Requests'
    }, {
        text: 'Account Settings'
    }, {
        text: 'Support'
    }, {
        text: 'Log Out'
    }];

    public onSplitButtonClick(dataItem: any): void {
        console.log('Paste');
    }

    public onSplitButtonItemClick(dataItem: any): void {
        if (dataItem) {
            console.log(dataItem.text);
        }
    }

    onButtonClick() {
        console.log('click');
    }
}

Installation

  1. The Buttons package is published on the Progress NPM Registry. To set up your access, follow the steps in Installation.

  2. Download and install the package:

    npm install --save @progress/kendo-angular-buttons
  3. Once installed, import the ButtonsModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ButtonsModule } from '@progress/kendo-angular-buttons';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, ButtonsModule]
    })
    export class AppModule {
    }

Dependencies

The Buttons package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs

The following dependencies will be installed automatically:

  • @progress/kendo-angular-popup
In this article