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.

Basic Usage

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

@Component({
    selector: 'my-app',
    template: `
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <button kendoButton (click)="onButtonClick()">Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [disabled]="true">Disabled Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [primary]="true">Primary Button</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [icon]="'refresh'">Kendo UI Icon</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [iconClass]="'fa fa-key fa-fw'">Font Awesome Icon</button>
        <br /><br />
        <button kendoButton (click)="onButtonClick()" [imageUrl]="imageUrl">Image</button>

        <kendo-button-group>
            <button kendoButton [togglable]="true">
                Option A
            </button>
            <button kendoButton [togglable]="true">
                Option B
            </button>
            <button kendoButton [togglable]="true">
                Option C
            </button>
        </kendo-button-group>
    `
})

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

    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 DropDowns package requires the following peer dependencies that have to be installed by your application:

  • @angular/common
  • @angular/core
  • rxjs
In this article