Kendo Angular UI

Kendo UI for Angular

Professional Grade Angular UI Component Library

import { Component } from '@angular/core';
import { customers } from './customers';

  selector: 'my-app',
  template: `
        <kendo-grid [kendoGridBinding]="gridData" [height]="410"
            buttonCount: buttonCount,
            info: info,
            type: type,
            pageSizes: [5, 10, 20],
            previousNext: previousNext
          <kendo-grid-column field="ContactName">
            <ng-template kendoGridCellTemplate let-dataItem>
              <div class="customer-photo"
               [ngStyle]="{ backgroundImage: getUrl(dataItem.CustomerID) }"></div>
        <div class="customer-name">
            {{ dataItem.ContactName }}
          <kendo-grid-column field="ContactTitle"></kendo-grid-column>
          <kendo-grid-column field="CompanyName"></kendo-grid-column>
          <kendo-grid-column field="Country"></kendo-grid-column>
  styles: [`
      .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;

      .customer-name {
          display: inline-block;
          vertical-align: middle;
          line-height: 32px;
          padding-left: 3px;

export class AppComponent {
  public gridData: any[] = customers;

  constructor() {}

  public getUrl(id: string) {
    return `url('${id}.jpg')`;
import { Component } from '@angular/core';

 selector: 'my-app',
 template: `

export class AppComponent {
  public chartOptions = {
    title: {
      text: "Gross domestic product growth /GDP annual %/"
    legend: {
      position: "bottom"
    seriesDefaults: {
      type: "area",
      area: {
        line: {
          style: "smooth"
    series: [{
      name: "India",
      data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
    }, {
      name: "World",
      data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
    }, {
      name: "Haiti",
      data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
    valueAxis: {
      labels: {
      format: "{0}%"
     line: {
       visible: false
     axisCrossingValue: -10
    categoryAxis: {
      categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011],
      majorGridLines: {
        visible: false
      labels: {
        rotation: "auto"
    tooltip: {
      visible: true,
      format: "{0}%"
import { Component } from '@angular/core';

  selector: 'my-app',
  template: `
    <div class="row">
      <div class="col-6">
        <kendo-autocomplete [data]="listItems" [placeholder]="'Your favorite sport'">

      <div class="col-6">
        <kendo-combobox [data]="listItems" [value]="'Basketball'">

      <div class="col-6">
        <kendo-dropdownlist [data]="listItems" [value]="'Basketball'">

      <div class="col-6">
        <kendo-multiselect [data]="listItems" [value]="value" [placeholder]="'Your favorite sports'"></kendo-multiselect>

export class AppComponent {
  public listItems: Array < string > = [
    'Baseball', 'Basketball', 'Cricket', 'Field Hockey',
    'Football', 'Table Tennis', 'Tennis', 'Volleyball'

  public value = ['Basketball', 'Cricket'];
More Demos

Need to take your Angular application to the next level? Take a look at our Angular UI components and documentation as well as sign up for a free trial to get access to dedicate support!

Expertly Engineered UI Components for Angular Development. No Compromises.

Spend your time developing core functionality, not UI components

Native Angular UI Components

We’re engineering true Angular UI components, not just wrapping existing components like other vendors. We’re dedicated to delivering pure, high-performance UI components built from the ground-up for Angular and without any jQuery dependencies. Additionally we stay in lock-step with the Angular framework, supporting Angular 8, 9, and 10.

Outstanding Product

In addition to a wealth of docs, demos, tutorials, and forums, we’re proud to provide a support service that our customers love. Support options range from 24-hour online support up to 4-hour phone support delivered by the actual engineers of the product.

Performance and Speed

Our components are engineered specifically for Angular enabling you to take full advantage of the framework’s native performance capabilities like Ahead of Time Compilation (AOT), Angular Universal Rendering and Tree Shaking.

Easy Installation and

Kendo UI for Angular is installed as discrete, scoped npm packages. It is easy and unobtrusive to get the latest bits – no need for time-consuming installations. Additionally, you have access to the latest bits immediately after we release them.

Accessibility & Localization

Our UI components are fully accessible out of the box. We support standards like WAI-ARIA, Section 508, and WCAG 2.1 with no loss of functionality or extra configuration work. The components can be localized to the language preference of your users.

Flexible Themes &

Kendo UI helps ensure your apps work great and look great too! Use our stock themes (including Material and Bootstrap) or customize them to fit in to your own designs. Just use our online ThemeBuilder App to easily modify existing themes or create new ones.


Kendo UI Earns 2020 TrustRadius Top Rated Award

Progress Kendo UI has earned TrustRadius's Top Rated Award for App Development Platform. The awards are based
entirely on customer satisfaction ratings.

Advanced Angular Grid

The Kendo UI for Angular Grid (Datatable) includes a comprehensive set of ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row virtualization, exporting to PDF and Excel, and accessibility support.

Learn more about our Grid
Angular Data Grid Example

Eye-Catching Angular Charts

The Kendo UI for Angular Charts deliver high quality graphical data visualization. They include a variety of chart types and styles that have extensive configuration options. This flexibility allows you to quickly and easily create the exact chart you need to fit your specific requirements for functionality and appearance.

Learn more about our Charts
Angular Chart UI Example

All Angular UI Components


Need .NET with your JavaScript?

Flexible Options Matched to Your Development Needs

Our DevCraft package gives you the complete Telerik .NET and Kendo UI JavaScript component libraries in one convenient bundle. Want more? You also get our Reporting and Productivity tools included in DevCraft as well for an outstanding value. Easily build modern, high-performance apps on any web, desktop or mobile platform—fast.

Get started fast by taking advantage of thousands of demos (with source code) as well as comprehensive documentation and a full assortment of VS templates.

Learn More About DevCraft

Angular UI Support and Learning

Industry leading support services backed by comprehensive documentation and learning resources.

success story
"Kendo UI is a force multiplier for our dev process, for our design process. Kendo UI allows me to focus on the things I do best, to spend more time designing the user experience and less time fighting with the functionality."
Bekah Rice,
Designer/Developer, truematter
Watch video

What Developers Say

Great JavaScript components for fast and high quality web app development. Kendo UI is very easy to use and very fast to get results from.

Goran Bajer Software Developer, Info Novitas Ltd.

After being in the industry for over 20 years I have seen a lot of frameworks come and go, but Kendo UI is by far the best for hybrid/mobile/native apps. Not only for its ease of use but it plays well with others.

Geovanni Hudson Sr. Web/UI Application Engineer, PCYC

As a developer working for the DOD we were able to rapidly integrate Kendo UI into a pre-existing C# application providing functionality to the client they were not even aware they wanted. This cut down majorly on cost saving roughly 1+ million. I would recommend Kendo UI to anyone who wants to impress their client with amazing UI.
Thanks Telerik Team!

Gerald Hirsch Front End Developer, U.S. Government

Get Started with Kendo UI for Angular

Kendo UI