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 importcategories
fromdata.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 insrc/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 insrc/app/app.component.html
:<kendo-dropdownlist [data]="dropDownItems" textField='text' valueField="value" [defaultItem]="defaultItem" (valueChange)="handleFilterChange($event)"> </kendo-dropdownlist>
Get the App Source Code
Your Kendo UI Angular Getting Started application is complete!
The complete source code is available in the kendo-angular-quickstart-cli
GitHub repository.
You can also run, fork, and experiment with the app directly in StackBlitz.
Activate Your License Key
Kendo UI for Angular is a professionally developed library distributed under a commercial license.
Starting from December 2020, Kendo UI for Angular requires a commercial license key or an active trial license key.
Follow the instructions in the article on setting up your license key to activate your license.
Make sure you exclude the license file from source control. For example, GitHub users have to add
kendo-ui-license.txt
to.gitignore
.
Next Steps
You are ready to explore the Components section and discover the amazing features of Kendo UI for Angular!
You may also want to check the following resources:
- Watch the Kendo UI Angular video course
- Browse more sample applications
- Get the Kendo UI Angular source code
- Take a look at the System Requirements
Happy coding!