Kendo Button For Angular 2

Introuduction

This blog tells you how to implement the Kendo button for Angular 2. For demo purposes I have created a Kendo button for Angular 2 with a simple onclick event. 
 
Before going through this blog I highly recommend you read my previous article  to get an idea about how to use/configure Kendo UI components for Angular 2.
 
Kendo button for Angular 2
 
To use the Kendo button for Angular 2 we need to install the Kendo button package, and pass the below command to install it. 
  1. npm install -S @progress/kendo-angular-buttons  
Once the installation is successful you will get the following message, you can ignore the warning. 
 
 
After installation is completed you will get the Kendo button package folder under node_modules->@progress in our project,
 
  
 
Write the following code in app/app.component.ts 
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `  
  6.         <button kendoButton (click)="onButtonClick()" [primary]="true">Click Me</button>  
  7.     `  
  8. })  
  9.   
  10. export class AppComponent {  
  11.     
  12.     onButtonClick() {  
  13.         alert("Hi I'm kendo button for angular 2");  
  14.     }  
  15. }  
app/app.module.ts 
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { ButtonsModule } from '@progress/kendo-angular-buttons';  
  4. import { HttpModule } from '@angular/http';  
  5.   
  6. import { AppComponent } from './app.component';  
  7.   
  8. @NgModule({  
  9.     imports: [BrowserModule, ButtonsModule, HttpModule],  
  10.     declarations: [AppComponent],  
  11.     bootstrap: [AppComponent]  
  12. })  
  13.   
  14. export class AppModule { }  
index.html 
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>KendoAngular</title>  
  6.     <base href="/">  
  7.   
  8.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  9.     <link rel="icon" type="image/x-icon" href="favicon.ico">  
  10. </head>  
  11. <body>  
  12.       
  13.     <app-root>Loading...  
  14.           
  15.     </app-root>  
  16. </body>  
  17. </html>   
Result
 
 
On clicking the button

 Get the source code from Github
 
I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this blog are always welcome.  
X

Build smarter apps with Machine Learning, Bots, Cognitive Services - Start free.

Start Learning Now