Reactive & Responsive UI in Angular with KendoBy: Jinal GandhiTable of Content TOC h u z
What is Kendo UIKendo UI providesWhy Kendo UI?Key FeaturesLicensingKendo UI for AngularSetting up Angular projectWhat is Kendo UINow 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 providesKendo 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 Features70+ UI ComponentsBeautiful ThemesSmart UI for Any Screen SizeEasy to learn and useComplete TrainingWorking with data offline and onlineIntegrates with AngularJSExport Excel, PDF and PNGWorks with all browsersUnlimited Product SupportLicensingIn 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 AngularKendo 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 projectFirst 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/cliThen we create new project in angular .
ng new my-first-KendoUIAfter 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/animationsSo 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 serveNow check output on localhost:4200 in browser.Now apply theme in our button so run following command:npm install @progress/kendo-theme-default –saveThen open style.
css and import following [email protected] ;[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.
