angular-bg

Kendo UI for Angular

Professional Grade Angular UI Component Library

Preview the future of collaboration, from Sketch to code with zero wasted cycles. Join the waitlist

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="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

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

More demos Learn more Download free trial

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.

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

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

Advanced Angular Grid

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.

Eye-Catching Angular Charts

chart

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.

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
angular-blog-post
Blog Post

All Things Angular

Dive into Angular's core concepts and hot topics: Angular Elements, Angular Ivy, Angular Schematics, Angular HttpClient, Progressive Web Apps, Service Workers, UI Libraries, etc.

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, U.S. Government

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
part-of-devcraft

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

Get Started

Get Started with Kendo UI for Angular

Since you are on a mobile device you cannot download your trial. Please enter your email and we will send you a link to download the trial.