New to Kendo UI for Angular? Start a free 30-day trial

Kendo UI for Angular Utilities Manual Setup

The manual setup approach provides greater visibility and better control over the files and references installed in your Angular application.

You can install the required peer dependencies and a Kendo UI theme by running separate commands for each step and import the desired Utilities components and directives in your standalone component.

Install the Utils package together with its dependencies by running the following command:

npm install --save @progress/kendo-angular-utils @progress/kendo-angular-common @progress/kendo-licensing

Import the required components and directives:

To add all components from the Utils package, import the KENDO_UTILS utility array in your standalone component.

import { Component } from '@angular/core';
import { KENDO_UTILS } from '@progress/kendo-angular-utils';

@Component({
    standalone: true,
    selector: 'my-app',
    imports: [KENDO_UTILS]
})

To add individual Utility components, import the corresponding utility arrays in your standalone component. See the list of available utility arrays.

For example if you only need the Drag and Drop functionality, import KENDO_DRAGANDDROP.

import { Component } from '@angular/core';
import { KENDO_DRAGANDDROP } from '@progress/kendo-angular-utils';

@Component({
    standalone: true,
    selector: 'my-app',
    imports: [KENDO_DRAGANDDROP]
})

The next step is to style the components by installing one of the available Kendo UI themes.

3.1 To start using a theme, install its package through NPM.
- Default theme
  sh
```
npm install --save @progress/kendo-theme-default
```
- Bootstrap theme
  sh
```
npm install --save @progress/kendo-theme-bootstrap
```
- Material theme
  sh
```
npm install --save @progress/kendo-theme-material
```
- Fluent theme
  sh
```
npm install --save @progress/kendo-theme-fluent
```
3.2 After the theme package is installed, reference it in your project. You can include a Kendo UI theme in your project in one of the following ways:
- By using an external (CDN) link.
- By using a precompiled CSS file.
- By compiling the theme from the SCSS source files.

Kendo UI for Angular Utilities Manual Setup

Learning Resources