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 set up 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. Additionally, there are dedicated tagged package versions that work with legacy versions of Angular. 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 installation instructions of the tool:
```
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.

Add Data

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 through 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 is now 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 Discontinued Boolean 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>