How To Use The Kendo UI Component For Angular 2

Introduction

Recently, Telerik by Progress has released a beta version of the Kendo UI for Angular 2. This article will tell us how to work with Kendo UI, using Angular 2 framework.

The list of kendo UI components that support the Angular 2 Framework, is given below.

Grid
Charts
Dropdowns
Inputs
Layout
Dialog
Upload
Buttons
Popup
ScrollView
Sortable
DataQuery
Themes & Styling

Please check on the list of kendo UI component for Angular 2

In this article, I am going to show a demo to implement the Kendo Grid for Angular 2.

Prerequisites

We are going to setup the project using Angular CLI Tool

Node.js (v4 and above)
NPM (v3)

Configuring the Kendo UI for Angular 2

Step 1 - Accessing the Progress NPM Registry

To access it, we need to have an active Telerik account. Run the below command

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

If you don't have the Telerik account, please click here to create one.

Enter your Telerik account Username (if the username is an email address, use everything before the @), password and Email.

Once the login is successful, you will get the below message.

Step 2 - Verifying the code

Verify if the code works or not , by passing the following command.

npm view @progress/kendo-angular-grid versions

The output should be as shown below.

Step 3 - Adding the components

Before adding the component, we need to install the Angular-CLI package, by giving the following command.

npm install -g angular-cli

It takes some time to install the package. Once the installation is complete, you will see the message shown in the below figure. You can just skip the warning.

Step 4 - Creating a new Project

Create a new project using the following command.

ng new KendoAngular --style=scss

style=scss is used to enable the scss compiler. You will see the below message if the installation is completed successfully.

Step 5 - Go to your project root

Use this command to go to the root of your project.

cd KendoAngular

Step 6 - Installing UI Compoents

Now, it’s time to install the UI components. Here, I am going to install the Grid component.

npm install -save @progress/kendo-angular-grid

After a while, if your NPM login has been correct, the package and its dependencies will be installed in your project.

Step 7 - Changing Module Code

Change the src/app/app.module.ts with the following.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { GridModule } from '@progress/kendo-angular-grid';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
GridModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 8

Index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>KendoAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>

Step 9

Change the app.component.ts:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<kendo-grid [data]="gridData">
<kendo-grid-column field="ProductID" title="Product ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
</kendo-grid-column>
<kendo-grid-column field="Discontinued" width="120">
<template kendoCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
</template>
</kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
private gridData: any[] = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}, {
"ProductID": 3,
"ProductName": "Aniseed Syrup",
"UnitPrice": 10.0000,
"Discontinued": false
}, {
"ProductID": 4,
"ProductName": "Chef Anton's Cajun Seasoning",
"UnitPrice": 22.0000,
"Discontinued": false
}, {
"ProductID": 5,
"ProductName": "Chef Anton's Gumbo Mix",
"UnitPrice": 21.3500,
"Discontinued": false
}, {
"ProductID": 6,
"ProductName": "Grandma's Boysenberry Spread",
"UnitPrice": 25.0000,
"Discontinued": false
}];
}

Step 10 - Installing Theme

Install the theme with the following command (run in the root of the project).

npm install -S @telerik/kendo-theme-default

Step 11 - Importing SCSS file

Import the SCSS file that ships with the theme package in your styles.scss. Add the below line in "styles.scss" to add the theme package for our project.

@import "~@telerik/kendo-theme-default/styles/packages/all";

Step 12

The Installation is completed. Let's now run the application using the following command

ng serve

After the project is built, you will get the following error. This is because we need to install the data query component.

We can easily overcome this error by adding the kendo-data-query component. Add the kendo-data-query by using the following command.

npm install -save @progress/kendo-data-query

List of all installed components -

Now, pass the ng serve command again.

Output

Conclusion

We have seen how to configure kendo UI for Angular 2 by installing and using the kendoGrid. Will learn more Kendo UI components for Angular 2 in my future article. I hope, you have enjoyed this article. Your valuable feedback, questions, or comments about this article are always welcome.

References

http://www.telerik.com/kendo-angular-ui/getting-started
http://www.telerik.com/kendo-angular-ui/components/grid/q

4 Comments

Join the conversation! Your thoughts help the community grow.

Meikandanathan7y ago
Good explanation
Sagar Jaybhay9y ago
Your giving good step by step explanation. Thank you .
Avinash Thakur10y ago
Nice Explain. Thanks for Sharing:)
- Gowtham K10y ago
  Thanks for a valuable comment Avinash Thakur :)