Components / Buttons / Button

Button Overview

The Button is an Angular directive which detects user interaction and triggers a corresponding event.

Basic Usage

The following example demonstrates the Button in action.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Default Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Flat Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [look]="'flat'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'flat'"></button>
            </p>
          </div>

          <div class="col-xs-12 col-sm-6 col-lg-3 example-col">
            <p>Outline Button</p>
            <p class="k-block">
              <button kendoButton (click)="onButtonClick()" [look]="'outline'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'">Browse</button>
              <button kendoButton (click)="onButtonClick()" [icon]="'folder'" [look]="'outline'"></button>
            </p>
          </div>
        </div>
    `
})

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

Functionality and Features

Events

The following example demonstrates basic Button events.

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

@Component({
    selector: 'my-app',
    template: `
        <p>
            <button kendoButton
                (click)="onClick()"
                (focus)="onFocus()"
                (blur)="onBlur()">
                My Button
            </button>
        </p>
        <event-log title="Event log" [events]="events"></event-log>
    `
})

export class AppComponent {
    public events: string[] = [];

    public onClick(): void {
        this.log('click');
    }

    public onFocus(): void {
        this.log('focus');
    }

    public onBlur(): void {
        this.log('blur');
    }

    private log(event: string): void {
        this.events.push(`${event}`);
    }
}

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';
import { EventLogComponent } from './event-log.component';

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

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

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events.reverse()">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() title: string;
  @Input() events: string[];
}

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

In this article