入门指南

安装你的第一个 Kendo UI for Angular组件

1.建立angle项目

1.使用npm包管理器全局安装@angular/cli。是一个命令行界面工具，可以帮助你直接从命令shell中初始化、开发、构建和维护你的Angular应用。

npm install -g @angular/cli

2.使用ng new命令创建Angular项目，kendo-angular-app是我们测试项目的名称。

ng new kendo-angular-app

ng new命令会提示你对新Angular应用做一些设置，让我们使用这些：

你想添加Angular路由吗?——不
您希望使用哪种样式表格式?—默认选择“CSS”，按回车键。

3.当新项目生成时，将src/app/app.component.html的内容替换为：

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

4.在浏览器中构建并打开Angular应用，打开终端，找到新创建的应用，然后运行Angular CLI的ng serve命令。

cd kendo-angular-app
ng serve -o

2.使用Kendo UI for Angular组件

1.Kendo UI for Angular是一个包含100多个完全本地组件的库，用于构建高质量的现代Angular UI。在本节中，您将通过三个步骤学习如何使用组件。

让我们将Calendar组件添加到项目中，为此就需要安装包。

ng add @progress/kendo-angular-dateinputs

为了方便开发人员，ng add命令会自动执行以下几个操作：

将@progress/kendo-angular-dateinputs包作为一个依赖项添加到package.json 文件中。
在当前应用模块(app.module.ts)中导入DateInputsModule。
在angular.json文件中注册Kendo UI默认主题。
将所有必需的对等依赖项添加到 package.json文件中。
触发npm install来安装主题和所有被添加的同级包。

2.打开src/app/app.component.html，将Calendar组件添加到你的标记中。

<kendo-calendar></kendo-calendar>

3.在浏览器中构建并打开应用程序。这样你就用两行代码完成了一个功能齐全的日历!

ng serve -o

使用许多其他的就像使用日历一样简单——安装相应的包，并在你的应用中使用组件的标记。

3.激活您的试用或商用许可证

Kendo UI for Angular是一个专业开发的库，并在商业许可下发布。

使用任何来自 Kendo UI for Angular库的UI组件都需要一个商业许可密钥或一个有效的试用许可密钥。要激活您的许可证，请按照上的说明进行操作。

现在你已经安装了组件，并设置了许可，你就可以开始使用Kendo UI for Angular进行开发了!您可以随意浏览完整的组件列表，或者按照下面的教程学习如何组合多个组件并使它们协同工作。

集成多个Kendo UI for Angular组件

Kendo UI for Angular是一个由许多模块化组件组成的丰富套件。接下来您将使用其中两个组件(Grid和DropDownList)来构建一个小型演示应用程序。

在继续之前，从页面中删除日历，这样你就有一个空白的应用程序可以使用。

1. 添加Kendo UI for Angular数据网格

让我们将Kendo UI forAngular网格添加到我们的应用程序中。

1.当使用ng add命令时，Grid包的安装只需要一个步骤。

ng add @progress/kendo-angular-grid

2.为简单起见，我们将使用静态本地JSON数据和一个稍后可以修改以使用远程数据的服务。在src/app文件夹中创建以下两个文件，并从GitHub中链接的文件中复制粘贴它们的内容：

3.在src/app/app.component.ts文件中，在组件声明中添加ProductService作为。

import { ProductService } from "./product.service";
//...
@Component({
selector: 'app-root',
//...
providers: [ProductService]
})

4.添加AppComponent类成员，我们将使用它们对网格进行分页和排序。

export class AppComponent {
// ...
public gridItems: Observable<GridDataResult>;
public pageSize: number = 10;
public skip: number = 0;
public sortDescriptor: SortDescriptor[] = [];
public filterTerm: number = null;
}

5.处理sortChange和pageChange事件以处理网格数据并更新视图。

export class AppComponent {
// ...
constructor(private service: ProductService) {
this.loadGridItems();
}

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

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

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

6.最后，在src/app/app.component.html中添加Grid标记，重新构建并在浏览器中检查Grid。

<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"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" title="Unit Price" format="{0:c}"></kendo-grid-column>
<kendo-grid-column field="Discontinued" filter="boolean">
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Discontinued" disabled />
</ng-template>
</kendo-grid-column>
<!-- ... -->
</kendo-grid>

在本节中，您向应用程序添加了一个健壮的Data Grid，并通过和进行了增强。请随意浏览Kendo UI for Angular Grid 档页面，了解Grid可以做多少事情。

2.添加Kendo UI for Angular下拉列表

让我们将添加到我们的应用程序中，并将它

1.当使用ng add命令时，DropDowns包的安装只需要一个步骤。

ng add @progress/kendo-angular-dropdowns

2.为DropDownList添加一些数据。为了简单起见，我们将使用静态本地JSON数据，稍后可以修改为使用远程数据，然后在src/app文件夹中创建一个data.categories.ts文件，并从这个GitHub中复制粘贴内容。

打开src/app/app.component.ts，从data.categories中导入categories 。

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

3.在src/app/app.component.ts文件中，声明我们将在DropDownList中使用的变量。若要在未选择任何项时为用户显示提示，请使用属性。默认项必须有一个与textField和valueField名称匹配的字段。

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

4.最后，打开src/app/app.component.html并添加下拉列表标记。

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

DropDownList的data属性指向一个对象数组或原始值。在本例中，我们将使用一个对象数组，因此指定和属性。

3.配置由下拉列表过滤的高级网格

最后，让我们添加一些组件交互，Grid有一个内置的过滤UI，但是我们将使用DropDownList来按产品类别过滤Grid就要做到这一点：

1.在src/app/app.component.html中绑定下拉列表的valueChange事件。

<kendo-dropdownlist
[data]="dropDownItems"
(valueChange)="handleFilterChange($event)"
>
</kendo-dropdownlist>

2.在src/app/app.component.ts中添加handleFilterChange方法。

export class AppComponent {
// ...
public handleFilterChange(item): void {
this.filterTerm = item.value;
this.skip = 0;
this.loadGridItems();
}
}

4. 获得完整的源代码

您的Kendo UI for Angular 入门应用程序已经完成。

你可以从下载并运行完整的样例应用程序。或者，直接在。

本文只展示了你可以用Kendo UI for Angular创建什么。我们希望我们已经成功地激励了你如何成为一个更高效的Angular开发人员，并利用我们的专业UI库快速构建复杂的UI。

资源

1. ThemeBuilder

若要完全控制Kendo UI for Angular组件的外观，你可以使用创建自己的样式。

ThemeBuilder是一个web应用程序，使您能够创建新的主题和自定义现有的。你所做的每一个改变几乎都会立刻被可视化，一旦你完成了Angular组件的样式化，你就可以导出一个包含主题样式的zip文件，并在Angular应用中使用它们。

2. Figma的UI套件

Kendo UI for Angular自带四个Figma UI工具包：Material、Bootstrap、Fluent和KendoUI Default。它们为应用设计者提供了一个与Kendo UI for Angular套件中可用的UI组件相匹配的构建块，拥有匹配的构建块可以保证设计的顺利实现。

3.虚拟教室

包含培训课程，代表了一种免费的按需技术培训计划，可供活跃的试用用户和活跃的许可证持有人使用，每个课程都会提供实用的知识和有用的应用程序开发方法，适合初级和高级开发人员。

4. Kendo UI生产力工具

为了帮助您更快地创建项目，Telerik为Visual Studio Code引入了Kendo UI生产力工具扩展。这个扩展附带了一个方便的模板向导，可以方便地创建新项目，并提供了一个丰富的代码片段库，允许你将Kendo UI for Angular组件添加到你的项目中。

彩票走势图