Kendo UI for Angular

Everything You Need to Build Professional-Grade Angular UI

The Angular component library developers trust to build modern, high-performance applications

*no credit card required

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Kendo UI is proud to hold the following industry awards.

G2 Leaders
Summer Award

TrustRadius Most Loved Award

TrustRadius Best Feature Set Award

TrustRadius Best Usability Award

TrustRadius Best Customer Support Award

100+ Expertly Crafted Angular Components

Kendo UI for Angular delivers components to meet any requirements including grids, data visualization, input and more. Each is carefully crafted to be the best of breed. Spend your time developing core functionality and leave UI to us.

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

Start Free Trial

*no credit card required