New to Kendo UI for AngularStart a free 30-day trial

Kendo UI for Angular DropDowns Manual Setup

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

If you already followed the installation steps in the Getting Started page, you can skip the manual setup approach demonstrated in this article.

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

  1. Install the DropDowns package together with its dependencies by running the following command:

    sh
      npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n @progress/kendo-angular-navigation @progress/kendo-angular-popup @progress/kendo-angular-treeview @progress/kendo-angular-inputs @progress/kendo-angular-intl @progress/kendo-drawing @progress/kendo-angular-common @progress/kendo-licensing @progress/kendo-angular-icons
  2. Import the required components and directives:

    • To add all components from the DropDowns package, import the KENDO_DROPDOWNS utility array in your standalone component.

      ts
      import { Component } from '@angular/core';
      import { KENDO_DROPDOWNS } from '@progress/kendo-angular-dropdowns';
      
      @Component({
          standalone: true,
          selector: 'my-app',
          imports: [KENDO_DROPDOWNS]
      })
    • To add individual DropDowns components, import the corresponding utility arrays in your standalone component. See the list of available utility arrays.

      For example if you only need the DropDownList component, import KENDO_DROPDOWNLIST.

      ts
      import { Component } from '@angular/core';
      import { KENDO_DROPDOWNLIST } from '@progress/kendo-angular-dropdowns';
      
      @Component({
          standalone: true,
          selector: 'my-app',
          imports: [KENDO_DROPDOWNLIST]
      })
  3. The next step is to style the components by installing one of the available Kendo UI themes—Kendo UI Default, Kendo UI Material, Kendo UI Bootstrap, or Kendo UI Fluent.

    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:

Learning Resources

In this article
Learning Resources
Not finding the help you need?
Contact Support