Post
Ask Question

How To Use Kendo UI In Angular Application

Preconditions

  • Basic knowledge of Angular CLI
  • Bootstrap
  • Node.js
  • V.S. Code

We Covers the belowing things

  • Create Angular application
  • Create header,side menu and layout component with admin module.
  • Angular Routing
  • Kendo UI setup

Now let's use following command to create angular project,

ng new KendoUI
cd KendoUI

Now install bootstrap by using the following command,

npm install bootstrap --save

Now install KendoUI packages using following command,

npm install --save @progress/kendo-angular-charts @progress/kendo-angular-common @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-drawing hammerjs @progress/kendo-licensing

Now install KendoUI theme using following command, I used default theme,

Default theme

npm install --save @progress/kendo-theme-default

Bootstrap theme

npm install --save @progress/kendo-theme-bootstrap

Material theme

npm install --save @progress/kendo-theme-material

Now Create the dashboard and layout component using the following command,

ng g c dashboard
ng g c layout

Now add the code in the following pages-:

Add this in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LayoutComponent } from './layout/layout.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DialogModule } from '@progress/kendo-angular-dialog';
import { UploadModule } from '@progress/kendo-angular-upload';
import { FileSelectModule } from '@progress/kendo-angular-upload';
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
import { NotificationModule } from '@progress/kendo-angular-notification';
import { NavigationModule } from '@progress/kendo-angular-navigation';
import { IconsModule } from '@progress/kendo-angular-icons';
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
import { LayoutModule } from '@progress/kendo-angular-layout';

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    GridModule,
    BrowserAnimationsModule,
    InputsModule,
    LabelModule,
    ChartsModule,
    ButtonsModule,
    DialogModule,
    UploadModule,
    FileSelectModule,
    PDFExportModule,
    NotificationModule,
    NavigationModule,
    IconsModule,
    IndicatorsModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add this in app.component.html

<router-outlet></router-outlet>

Add this in app-routing.module.ts

import {
    NgModule
} from '@angular/core';
import {
    RouterModule,
    Routes
} from '@angular/router';
import {
    DashboardComponent
} from './dashboard/dashboard.component';
import {
    LayoutComponent
} from './layout/layout.component';
const routes: Routes = [{
    path: 'Admin',
    component: LayoutComponent,
    children: [{
        path: 'Dashboard',
        component: DashboardComponent
    }]
}, {
    path: '**',
    redirectTo: "/Admin/Dashboard",
    pathMatch: 'full'
}, {
    path: '',
    redirectTo: "/Admin/Dashboard",
    pathMatch: 'full'
}];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {}

Add this in layout.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-layout',
    templateUrl: './layout.component.html',
    styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit {
    private data: any;
    public kendokaAvatar = '/assets/img/0.jpg';
    public logout = '/assets/img/logout.png';
    constructor() {}
    ngOnInit(): void {}
    public bottomNavigationItems: Array < any > = [{
        text: 'Home',
        icon: 'home',
        selected: true
    }, {
        text: 'Calendar',
        icon: 'calendar'
    }, {
        text: 'Notifications',
        icon: 'bell'
    }];
}

Add this in layout.component.html

<!--The content below is only a placeholder and can be replaced.-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>Kendo</title>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- <kendo-breadcrumb [items]="breadCrumbItems"></kendo-breadcrumb> -->
<!-- <kendo-bottomnavigation [border]="true" [items]="bottomNavigationItems"></kendo-bottomnavigation> -->
<br />
  <div id="wrapper">
    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
      <!-- <div class="navbar-header"> -->
        <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button> -->
        <!-- <a class="navbar-brand" href="index.html">Kendo Project</a> -->
      <!-- </div> -->
      <!-- /.navbar-header -->
      <!-- /.navbar-top-links -->
      <kendo-appbar position="top">
        <!-- <kendo-appbar-section>
            <button class="k-button k-button-clear">
                <kendo-icon name="menu"></kendo-icon>
            </button>
        </kendo-appbar-section> -->
        <!-- <kendo-appbar-section>
            <h1 class="title">Kendo Project</h1>
        </kendo-appbar-section> -->
        <kendo-appbar-spacer width="32px"></kendo-appbar-spacer>
        <kendo-appbar-section>
            <ul>
                <li><a class="DashFont" [routerLink]="['/Admin/Dashboard']">Dashboard</a></li>
                <!-- <li><a [routerLink]="['/Admin/userlist']">Users</a></li>
                <li><a [routerLink]="['/Admin/profile']">Profile</a></li>
                <li><a [routerLink]="['/Admin/userserver']">User List</a></li> -->
            </ul>
        </kendo-appbar-section>
        <kendo-appbar-spacer></kendo-appbar-spacer>
        <kendo-appbar-section>
          <a [routerLink]="['/Admin/profile']"><kendo-avatar [imageSrc]="kendokaAvatar" shape="circle" width="26px" height="26px"> </kendo-avatar></a>
        </kendo-appbar-section>
        <kendo-appbar-section class="actions">
          <a [routerLink]="['/AdminLogout']"><kendo-avatar [imageSrc]="logout" shape="circle" width="26px" height="26px"> </kendo-avatar></a>
            <kendo-badge-container>
                <button class="k-button k-button-clear">
                    <kendo-icon name="bell"></kendo-icon>
                </button>
                <kendo-badge shape="dot" themeColor="warning" size="small" position="inside"></kendo-badge>
            </kendo-badge-container>
            <span class="k-appbar-separator"></span>
        </kendo-appbar-section>
    </kendo-appbar>
      <!-- <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
          <ul class="nav" id="side-menu">
     
            <li>
              <a [routerLink]="['/Admin/Dashboard']"><i class="fa fa-edit fa-fw"></i>Dashboard</a>
            </li>
            <li>
              <a [routerLink]="['/Admin/userlist']"><i class="fa fa-edit fa-fw"></i>Users List</a>
            </li>
            <li>
              <a [routerLink]="['/Admin/userserver']"><i class="fa fa-edit fa-fw"></i>Users Server List</a>
            </li>
            <li>
              <a [routerLink]="['/Admin/imagegrid']"><i class="fa fa-edit fa-fw"></i>Image Grid</a>
            </li>
            <li>
              <a [routerLink]="['/AdminLogout']"><i class="fa fa-edit fa-fw"></i>Logout</a>
            </li>
          </ul>
        </div>
      </div> -->
    </nav>
    <div id="page-wrapper">
      <div class="row">
        <div class="col-lg-12">   
         <router-outlet></router-outlet>
        </div>
        <!-- /.col-lg-12 -->
      </div>
      <!-- /.row -->
    </div>
  </div>
  <!-- /#page-wrapper -->
  <!-- /#wrapper -->
</body>
</html>

Add this inlayout.component.css

: host {
    padding: 0;
}
kendo - appbar.title {
    font - size: 18 px;
    margin: 10 px;
}
kendo - badge - container {
    margin - right: 8 px;
}
kendo - appbar ul {
    font - size: 14 px;
    list - style - type: none;
    padding: 0;
    margin: 0;
    display: flex;
}
kendo - appbar li {
    margin: 0 9 px;
}
kendo - appbar li: hover {
    cursor: pointer;
    color: #d6002f;
}
kendo - appbar.actions.k - button {
    padding: 0;
}
kendo - breadcrumb {
    margin - left: 30 px;
}.DashFont {
    font - size: 16 px;
    font - family: 'Segoe UI', Tahoma, Geneva, Verdana, sans - serif;
}

Add this in dashboard.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
    ngOnInit(): void {}
    constructor() {}
    public events: string[] = [];
    public series: any[] = [{
        name: "India",
        data: [
            3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.89, 8.238, 9.552, 6.855,
        ],
    }, {
        name: "Russian Federation",
        data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3],
    }, {
        name: "Germany",
        data: [
            0.01, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.69, 2.995,
        ],
    }, {
        name: "World",
        data: [
            1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727,
        ],
    }, ];
    public categories: number[] = [
        2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011,
    ];
    public onRender(): void {
        this.log("render");
    }
    public onAxisLabelClick(e: any): void {
        this.log("axisLabelClick", e);
    }
    public onLegendItemClick(e: any): void {
        this.log("legendItemClick", e);
    }
    public onLegendItemHover(e: any): void {
        this.log("legendItemHover", e);
    }
    public onPlotAreaClick(e: any): void {
        this.log("plotAreaClick", e);
    }
    public onPlotAreaHover(e: any): void {
        this.log("plotAreaHover", e);
    }
    public onSeriesClick(e: any): void {
        this.log("seriesClick", e);
    }
    public onSeriesHover(e: any): void {
        this.log("seriesHover", e);
    }
    private log(event: string, arg: any = null): void {
        this.events.push(`${event}`);
        console.log(arg);
    }
    public data: any[] = [{
        kind: 'Hydroelectric',
        share: 0.175
    }, {
        kind: 'Nuclear',
        share: 0.238
    }, {
        kind: 'Coal',
        share: 0.118
    }, {
        kind: 'Solar',
        share: 0.052
    }, {
        kind: 'Wind',
        share: 0.225
    }, {
        kind: 'Other',
        share: 0.192
    }];
    public labelContent(e: any): string {
        return e.category;
    }
}

Add this in dashboard.component.html

<kendo-chart>
    <kendo-chart-title text="Units sold"></kendo-chart-title>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
            [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'august' , 'september' , 'October', 'november', 'December']"
            [title]="{ text: 'Months' }">
        </kendo-chart-category-axis-item>
    </kendo-chart-category-axis>
    <kendo-chart-series-defaults [highlight]="{ inactiveOpacity: 0.3 }">
    </kendo-chart-series-defaults>
    <kendo-chart-series>
      <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98, 210, 200, 220, 180, 170]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212, 190, 210, 250, 260, 220]">
      </kendo-chart-series-item>
      <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95, 240, 250, 210, 280, 290, 320]">
      </kendo-chart-series-item>
    </kendo-chart-series>
  </kendo-chart>
<hr>
<kendo-chart>
    <kendo-chart-series>
      <kendo-chart-series-item
          type="donut" [data]="data"
          categoryField="kind" field="share">
        <kendo-chart-series-item-labels
          [content]="labelContent"
          color="#fff" background="none">
        </kendo-chart-series-item-labels>
      </kendo-chart-series-item>
    </kendo-chart-series>
    <kendo-chart-legend [visible]="false"></kendo-chart-legend>
  </kendo-chart>

Add this in package.json dependencies

"private": true,
  "dependencies": {
    "@angular/animations": "~12.1.0-",
    "@angular/common": "~12.1.0-",
    "@angular/compiler": "~12.1.0-",
    "@angular/core": "~12.1.0-",
    "@angular/forms": "~12.1.0-",
    "@angular/localize": "~12.1.0-",
    "@angular/platform-browser": "~12.1.0-",
    "@angular/platform-browser-dynamic": "~12.1.0-",
    "@angular/router": "~12.1.0-",
    "@progress/kendo-angular-buttons": "^7.0.0",
    "@progress/kendo-angular-charts": "^6.0.0",
    "@progress/kendo-angular-common": "^2.0.0",
    "@progress/kendo-angular-dateinputs": "^6.0.0",
    "@progress/kendo-angular-dialog": "^6.0.1",
    "@progress/kendo-angular-dropdowns": "^6.0.0",
    "@progress/kendo-angular-excel-export": "^4.0.0",
    "@progress/kendo-angular-grid": "^6.0.1",
    "@progress/kendo-angular-icons": "^1.0.0",
    "@progress/kendo-angular-indicators": "^1.1.2",
    "@progress/kendo-angular-inputs": "^8.0.0",
    "@progress/kendo-angular-intl": "^3.0.0",
    "@progress/kendo-angular-l10n": "^3.0.0",
    "@progress/kendo-angular-label": "^3.0.0",
    "@progress/kendo-angular-layout": "^6.5.0",
    "@progress/kendo-angular-navigation": "^1.1.4",
    "@progress/kendo-angular-notification": "^3.0.4",
    "@progress/kendo-angular-pdf-export": "^3.0.0",
    "@progress/kendo-angular-popup": "^4.0.3",
    "@progress/kendo-angular-progressbar": "^2.0.3",
    "@progress/kendo-angular-treeview": "^6.0.0",
    "@progress/kendo-angular-upload": "^8.0.0",
    "@progress/kendo-data-query": "^1.0.0",
    "@progress/kendo-drawing": "^1.0.0",
    "@progress/kendo-licensing": "^1.0.2",
    "@progress/kendo-svg-icons": "^0.1.2",
    "@progress/kendo-theme-default": "^5.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },

Now add the attached images

Now run the following command.

npm i

Now, please run the application using the 'npm start' command and check the result.

How to use kendo UI in angular application


Similar Articles