Reactive

Reactive & Responsive UI in Angular with Kendo
By: Jinal Gandhi

Table of Content

TOC h u z
What is Kendo UI
Kendo UI provides
Why Kendo UI?
Key Features
Licensing
Kendo UI for Angular
Setting up Angular project

What is Kendo UI
Now a days people expect rich interactive and fluent websites.In order to archive developers make good used of the client side technology which is kendo UI provides you.

Kendo UI is collection of images ,scripts and styles.Kendo UI leverages many of the existing technologies to make the rich immersive web application, some of them are javascript,HTML5,css3,jquery.

Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library.

It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements. Kendo UI includes widgets for enterprise-grade line-of-business applications and is suitable for creating professional websites that require expert and timely technical support.

Kendo UI provides
Kendo UI provides collections of rich UI widgets,HTML5 controls based on JQuery.Kendo UI is supported for all browsers.three categories for UI widgets.

Web- This widget for web and touch desktop development ,it hase full featured grid with paging ,filtering and custom templates tree view and many more.

DataViz-These are usually used for representing data which includes charts and gauges.also called data visualization widgets that is used for generally desktop websites or mobile websites.

Mobile-These feature an adaptive rendering technology which displays a truly native feel for iOS, Android and Blackberry, this include controls such as scroll view, tab strip, list view, buttons, navigation bars etc.

Why Kendo UI?

Why kendo UI and not other tools which is also available.that type of questions is arise .so first of all kendo UI provides all tools you need in one package so there is no need to go download too much libraries.

Next is the performance, Kendo UI is developed from ground to up with performance in mind.and the last is support,kendo UI product of popular component vendor,other have community support for their product but Kendo UI has a proper professional support for itself.

Key Features
70+ UI Components
Beautiful Themes
Smart UI for Any Screen Size
Easy to learn and use
Complete Training
Working with data offline and online
Integrates with AngularJS
Export Excel, PDF and PNG
Works with all browsers
Unlimited Product Support

Licensing
In kendo UI three licence available.

30 days of trial with full features of Kendo UI.

There is also available open source licence which is suitable for GPL compatible projects.GPL v3.

Commercial licence.

Kendo UI for Angular
Kendo UI is also used in angular for best UI and also for the animation.so we have getting started with setting up kendo UI for angular.You have used angular before you may have seen seen some UI packages such as material to prime ng and course of kendall.let’s get setup new project generated by the angular CLI.

So the first thing we all have to do is register for a trial.so go for the this link for register:
https://www.telerik.com/kendo-angular-ui and click to Get a Free Trial.

Then click to try now and select option UI for angular.

So you can see the registration form for free trial fill this form or also register with other option google ,facebook ,yahoo etc.

Now we have setting up angular project:

Setting up Angular project
First we start the kendo in angular we need to install angular cli if they have not installed in your computer.so the following command to install angular Cli.

npm install -g @angular/cli
Then we create new project in angular .

ng new my-first-KendoUI

After create a new project go to the project we have to create.

cd my-first-KendoUI

In kendo UI is a contains different type of components like button ,charts ,dialogue,grid and many more.now we can use button component in this project.

In that we have to install npm progress repository.so the following command to add @progress repository and used components.

npm install –save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations

So in above command install @progress and also add animations.now open the project in visual studio code .

And open app.module.ts file and add following imports.

import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { AppComponent } from ‘./app.component’;
import {ButtonsModule} from ‘@progress/kendo-angular-buttons’;

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

Now open app.component.html and add following code and remove unused code.

;button kendoButton;Kendo;/button;

Now run project in following command.

ng serve

Now check output on localhost:4200 in browser.

Now apply theme in our button so run following command:
npm install @progress/kendo-theme-default –save

Then open style.css and import following statement.

@import ;[email protected]/kendo-theme-default/dist/all.css;

Also add primary property on button in app.component.html.

;button kendoButton primary=;true;;My Kendo UI Button;/button;

And now run again project with ng serve command and see the output:

So above is the example of button component in Kendo UI.There is many type of components in Kendo UI. you can see on that official website.

So above is the basic of Kendo UI for Angular.