How to Use Kendo UI for Angular

How to Use Kendo UI for Angular

tudip-logo

Tudip

13 February 2020

Kendo UI is an open-source framework for building modern web and mobile apps with HTML5 and JavaScript. It provides themes that can be used to style an Angular application.

It provides many built-in features like data binding, sorting, pagination, etc.

Now to add Kendo in your Angular application here are quick steps to follow:

  • Using with Angular CLI

    Angular CLI is basically a command line tool for building Angular applications. To install any package from Kendo UI for Angular use ‘ng-add’ and add the name of the package.

    ng add @progress/kendo-angular-inputs
    • Adds the @progress/kendo-angular-inputs package as a dependency.
    • Installs the rxjs-compat package.
    • Imports the InputsModule in the current application module.
    • Add the default Kendo UI theme in the angular.json file.
    • Adds all the required dependencies into the package.json file.
    • Fire the ‘npm install’ command to install the theme and all required packages that are added.
  • Adding the Kendo UI Package in your Application

    • Adding the packages in your application for example, to include the Kendo Buttons, do the following command:
      npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations
    • Import the component directives into your source code. Change the code in src/app/app.module.ts to:
      import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; // Import the ButtonsModule... import { ButtonsModule } from '@progress/kendo-angular-buttons'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, HttpModule, // ... and register it ButtonsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
    • Add the HTML for the Button in your template file i.e src/app/app.component.html:
      <h1>{{title}}</h1> <button kendoButton [primary]="true">My Kendo UI Button</button> 
  • Adding the Styles

    Kendo UI for Angular distributes its Default theme as a separate NPM package that is available as @progress/kendo-theme-default

    • Install the Default theme in the same way you included the Buttons package:
      npm install --save @progress/kendo-theme-default
    • Import the CSS file from the Default theme package into src/app/app.component.ts:
      @Component({ selector: 'my-app', styleUrls: [ // Load the Kendo UI Default theme 'node_modules/@progress/kendo-theme-default/dist/all.css' ], template: ` <h1>Hello {{name}}!</h1> <button kendoButton (click)="onButtonClick()" [primary]="true">My Kendo UI Button</button> `, })</pre

Request a quote