New to Kendo UI for Angular? Start a free 30-day trial

Get Started with Kendo UI for Angular

This tutorial describes how to install and start using Kendo UI for Angular.

First, we will go through the installation steps.
Next, we'll create a simple app with a few Kendo UI for Angular components. The app source code is available for your reference.
Finally, you will learn how to activate your Kendo UI for Angular license.
On every step, we will recommend relevant learning resources that will help you be successful with Kendo UI for Angular.

Do You Prefer Video?
You can setup an Angular project and add Kendo UI for Angular components by following the steps in this guide. Alternatively, you can check our Angular video tutorials or our full-blown Kendo UI Angular video course.

Set up the Angular Project

The latest Kendo UI for Angular packages target the current Angular long-term support versions up to the latest official Angular version. For more details, check our System Requrements.

The easiest way to start with Angular is to use the Angular CLI Tool. To scaffold your project structure, follow the tool's installation instructions:

npm install -g @angular/cli
ng new kendo-angular-app

The ng new command will prompt you for a few settings of the new Angular app. Let's use these:

Enforce stricter type checking and bundle budgets? - No
Add Angular routing? - Yes
Stylesheet format? - CSS

When the new app is generated, replace the content of src/app/app.component.html with:

<h1>Hello Kendo UI for Angular!</h1>

Then, build and open the Angular app in the browser:

cd kendo-angular-app
ng serve -o

We are ready to dive into Kendo UI for Angular! Next, we will add some data to our app, and then bind it to a DropDownList and a Grid.

Let's prepare to use professional data-driven UI components by adding some data to our app. For simplicity, we will use static local JSON data and a service that you can later modify to use remote data. Create the following three files and copy-paste their content from the linked files in GitHub:

Add a DropDownList

Kendo UI for Angular is distributed via multiple NPM packages scoped to @progress.

Let's add a Kendo UI Angular DropDownList to our app and bind it to an array of objects.

The DropDowns package installation requires a single step when using the ng add command:

ng add @progress/kendo-angular-dropdowns

The ng add command also installs the Default Kendo UI theme automatically.

Open src/app/app.component.ts and import categories from data.categories:

import { categories } from "./data.categories";

In the same file, declare the variables that we will use inside the DropDownList declaration. defaultItem determines the initially selected item:

export class AppComponent {
  public dropDownItems = categories;
  public defaultItem = { text: "Filter by Category", value: null };
}

Finally, open src/app/app.component.html and add the DropDownList markup:

<p>
  <kendo-dropdownlist [data]="dropDownItems" [defaultItem]="defaultItem" textField="text" valueField="value" >
  </kendo-dropdownlist>
</p>

The DropDownList should now be operational on your sample page.

Add a Grid

Let's go on and add a Kendo UI Angular Grid.

First, install the Grid npm package and all dependencies:

ng add @progress/kendo-angular-grid

Import the necessary types and the data service in src/app/app.component.ts:

import { GridDataResult, PageChangeEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor } from "@progress/kendo-data-query";
import { ProductService } from "./product.service";
import { Observable } from "rxjs";

Add the ProductService as a provider in the component declaration:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ProductService]
})

Add the AppComponent class members that we will use to page and sort the Grid:

export class AppComponent {

  // ...

  public gridItems: Observable<GridDataResult>;
  public pageSize: number = 10;
  public skip: number = 0;
  public sortDescriptor: SortDescriptor[] = [];
  public filterTerm: number = null;

  constructor(private service: ProductService) {
    this.loadGridItems();
  }

  public pageChange(event: PageChangeEvent): void {
    this.skip = event.skip;
    this.loadGridItems();
  }

  private loadGridItems(): void {
    this.gridItems = this.service.getProducts(
      this.skip,
      this.pageSize,
      this.sortDescriptor,
      this.filterTerm
    );
  }

  public handleSortChange(descriptor: SortDescriptor[]): void {
    this.sortDescriptor = descriptor;
    this.loadGridItems();
  }

}

Finally, add the Grid markup in src/app/app.component.html, rebuild and check the Grid in your browser:

<kendo-grid [data]="gridItems | async" [pageSize]="pageSize" [skip]="skip" [pageable]="true"
  (pageChange)="pageChange($event)" [sortable]="true" [sort]="sortDescriptor" (sortChange)="handleSortChange($event)"
  [height]="400">
  <kendo-grid-column field="ProductID" title="ID" width="50">
  </kendo-grid-column>
  <kendo-grid-column field="ProductName" title="Product Name">
  </kendo-grid-column>
  <kendo-grid-column field="Category.CategoryName" title="Category">
  </kendo-grid-column>
  <kendo-grid-column field="UnitPrice" title="Unit Price" width="140" format="{0:c}">
  </kendo-grid-column>
  <kendo-grid-column field="Discontinued" width="140" filter="boolean">
    <ng-template kendoGridCellTemplate let-dataItem>
      <input type="checkbox" [checked]="dataItem.Discontinued" disabled />
    </ng-template>
  </kendo-grid-column>
</kendo-grid>

The Grid instance in our app can be sorted and paged. It uses number formatting for the UnitPrice column and checkboxes in a cell template to display the boolean Discontinued field.

Filter the Grid with the DropDownList

Finally, let's add some component interaction. The Grid has a built-in filtering UI, but instead, we will use the DropDownList to filter the Grid by product category. To achieve this, we need to add a valueChange handler:

Add the handleFilterChange method in src/app/app.component.ts:

export class AppComponent {

  // ...

  public handleFilterChange(item: {
    text: string;
    value: number | null;
  }): void {
    this.filterTerm = item.value;
    this.skip = 0;
    this.loadGridItems();
  }
}

Bind the (valueChange) event of the DropDownList in src/app/app.component.html:

<kendo-dropdownlist [data]="dropDownItems" textField='text' valueField="value" [defaultItem]="defaultItem" (valueChange)="handleFilterChange($event)">
</kendo-dropdownlist>