Angular UI组件库入门指南 - 如何安装和开始使用（二） AngularKendo UItelerikUI控件

程序员文章站 2022-05-30 09:59:31

...

本文主要介绍如何安装和开始使用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>