Getting Started with the Kendo UI for Angular ListBox
This guide provides the information you need to start using the Kendo UI for Angular ListBox—it includes instructions about the available installation approaches, the required dependencies, the code for running the project, and links to additional resources.
After the completion of this guide, you will be able to achieve an end result as demonstrated in the following example.
Before you start with the installation of any Kendo UI for Angular control, ensure that you have a running Angular project. The prerequisites to accomplish the installation of the components are always the same regardless of the Kendo UI for Angular package you want to use, and are fully described in the section on setting up your Angular project.
You can choose to use either of the following two approaches for installing the Kendo UI for Angular package and the styles you want to apply:
The quick setup presents an automatic approach for adding packages with Angular CLI through the
ng-add command. It is suitable for saving time and efforts as
ng-add executes in a single step a set of otherwise individually needed commands.
To add the Kendo UI for Angular ListBox package, run the following command:
ng add @progress/kendo-angular-listbox
As a result, the
ng-add command will perform the following actions:
- Add the
@progress/kendo-angular-listboxpackage as a dependency to the
- Import the
ListBoxModulein the current application module.
- Register the Kendo UI Default theme in the
- Add all required peer dependencies to the
npm installto install the theme and all peer packages that are added.
The manual setup 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 component modules in your application root or feature module.
Install the ListBox package together with its dependencies by running the following command:
npm install --save @progress/kendo-angular-listbox @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-buttons @progress/kendo-angular-common @progress/kendo-licensing
3.1 To start using a theme, install its package through NPM.
npm install --save @progress/kendo-theme-default
npm install --save @progress/kendo-theme-bootstrap
npm install --save @progress/kendo-theme-material
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:
After successfully installing the ListBox package and importing its module, add the following code in the
<kendo-listbox kendoListBoxDataBinding [data]="data" ></kendo-listbox>
dataproperty to specify the ListBox items in the
public data: any = [ 'Albania', 'Andorra', 'Armenia' ];
Build and serve the application by running the following command in the root folder.
Point your browser to http://localhost:4200 to see the Kendo UI for Angular ListBox component on the page.
As of December 2020, using any of the UI components from the Kendo UI for Angular library requires either a commercial license key or an active trial license key. If your application does not contain a Kendo UI license file, activate your license key.
The following table lists the specific functionalities that are provided by each of the ListBox dependencies as per package:
|@angular/common||Provides the commonly-needed services, pipes, and directives provided by the Angular team. For more information, refer to the official Angular documentation.|
|@angular/core||Contains critical runtime parts of the Angular framework that are needed by every application. For more information, refer to the official Angular documentation.|
|@progress/kendo-angular-l10n||Provides the globalization features of Kendo UI for Angular.|
|@progress/kendo-angular-intl||Provides the Kendo UI for Angular services and pipes for the parsing and formatting of dates and numbers.|
|@progress/kendo-angular-common||Contains common utilities that are needed by every Kendo UI for Angular component.|
|@progress/kendo-angular-buttons||Contains the Kendo UI for Angular Buttons components.|
|@progress/kendo-licensing||Contains the |
|rxjs||Provides the RxJS library for reactive programming which uses Observables for an easier composition of asynchronous or callback-based code.|