How to Use Kendo UI for Angular

 Tudip

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