Kendo Angular UI

Kendo UI for Angular

Angular Component Library for Building Modern UI

100+ fully-native Angular components developers trust to build enterprise-grade applications in no time. 

NEW

*Includes access to online technical training to speed-up your onboarding.

Grid Charts Dropdowns Full List of Controls 
import { Component } from '@angular/core';
import { customers } from './customers';

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid [kendoGridBinding]="gridData" [height]="410"
          [pageable]="{
            buttonCount: buttonCount,
            info: info,
            type: type,
            pageSizes: [5, 10, 20],
            previousNext: previousNext
          }"
          [sortable]="true"
          [groupable]="true"
          [filterable]="true"
          [pageSize]="10">
          <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 }}
        </div>
            </ng-template>
          </kendo-grid-column>
          <kendo-grid-column field="ContactTitle"></kendo-grid-column>
          <kendo-grid-column field="CompanyName"></kendo-grid-column>
          <kendo-grid-column field="Country"></kendo-grid-column>
        </kendo-grid>
    `,
  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('https://demos.telerik.com/kendo-ui/content/web/Customers/${id}.jpg')`;
  }
}
import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
    <kendo-chart
      [title]="chartOptions.title"
      [legend]="chartOptions.legend"
      [seriesDefaults]="chartOptions.seriesDefaults"
      [series]="chartOptions.series"
      [valueAxis]="chartOptions.valueAxis"
      [categoryAxis]="chartOptions.categoryAxis"
      [tooltip]="chartOptions.tooltip">
    </kendo-chart>
  `
})

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';

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

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

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

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

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

  public value = ['Basketball', 'Cricket'];
}
DemoGrid;
DemoCharts
DemoDropdowns
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 9, 10, 11, and 12.

Outstanding Product
Support

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
Updates

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 &
ThemeBuilder

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.

trust-radius-badge

Telerik and Kendo UI Earns Multiple TrustRadius Best of Development 2021 awards

Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.

trust-radius-badge

Kendo UI Earned TrustRadius' Top Rated 2021 award

Progress Kendo UI has earned TrustRadius’ Top Rated Award for Software Components.

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

Upgrade to Telerik DevCraft Complete

Be Ready for Any Project & Technology

Save up to 50% in development time by getting 1,250+ .NET and JavaScript UI components for building web, desktop and mobile apps.

Get the Best Value for Money

Enjoy Kendo UI (for Angular, React, jQuery, Vue) along with 12 products for .NET apps development, embedded reporting and mocking tools while saving up to 90% from the upgrade price.

Angular UI Support and Learning

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

truematter
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.

GoranBajer
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.

GeovanniHudson
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!

GeraldHirsch
Gerald Hirsch Front End Developer, U.S. Government
logos

Get Started with Kendo UI for Angular

Kendo UI