How to Use Kendo UI for Angular

 

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