Angular UI组件库入门指南 - 如何安装和开始使用(二)
本文主要介绍如何安装和开始使用Kendo UI for Angular。
- 首先完成安装步骤。
- 然后创建一个简单的应用程序,其中包含一些Kendo UI for Angular组件,应用程序源代码可供您参考。
- 最后,您将学习如何为Kendo UI for Angular激活许可。
使用DropDownList过滤网格
最后,让我们添加一些组件交互。Grid有一个内置的过滤UI,但我们将要使用DropDownList按产品类别过滤Grid,为此需要添加一个valueChange处理程序:
1. 在src/app/app.component.ts中添加handleFilterChange方法:
export class AppComponent { // ... public handleFilterChange(item: { text: string; value: number | null; }): void { this.filterTerm = item.value; this.skip = 0; this.loadGridItems(); } }
2. 在src/app/app.component.html中绑定DropDownList的(valueChange)事件:
<kendo-dropdownlist [data]="dropDownItems" textField='text' valueField="value" [defaultItem]="defaultItem" (valueChange)="handleFilterChange($event)"> </kendo-dropdownlist>
应用程序源代码
您的 Kendo UI Angular 入门应用程序已完成!
完整的源代码可在kendo-angular-quickstart-cli GitHub 存储库中找到。
激活许可证密钥
Kendo UI for Angular是一个专业开发的库,在商业许可下分发。从 2020 年 12 月开始,Kendo UI for Angular需要商业许可证密钥或有效的试用许可证密钥。更多产品授权信息,欢迎咨询“在线客服”了解!
Kendo UI for Angular是Kendo UI系列商业产品的最新产品。Kendo UI for Angular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能Angular UI组件,无需任何jQuery依赖关系。