Introduction

This article tells you about how to implement Kendo combo box for an Agular 2 from Kendo dropdown package. Before going to this article, I strongly recommend to read my previous article, where I explained how to use Kendo UI component for an Angular 2.
Combo box displays a list of options as well as it allows the user to pick a value from the list or to enter the custom value

Please check on the list of Kendo UI component for Angular 2

Content

  1. Setup Kendo UI for an Angular 2.
  2. Configuring Kendo Combo box control for an Angular 2.

Quick setup of Kendo UI for Angular 2

Before going to the initial setup of the project, just make sure that the latest versions of Node.js and NPM are installed in your system

Step 1

Install Angular-CLI package, open the command prompt and write the command given below to install Angular CLI package

npm install -g @angular-cli

Step 2

Go to the respective directory, where you need to save your project and give the command given below in the command prompt to create a project.

ng new kendodropdown --style=scss

Kendodropdown is our project name.

The project structure is given which is opened in Visual Studio.

Step 3

To associate the progress of NPM registry with the @progress scope, run the command given below.

npm login --registry=https://registry.npm.telerik.com/ --scope=@progress

NPM will ask you for telerik account credential and an email. If you are not an existing user, try to create a new telerik account.

Configuring Kendo auto complete control for an Angular 2

Step 4

Let’s create a new component. In this article, we are going to see Kendo combo box for an Angular 2. To use the control, first we need to install Kendo dropdowns module, give the command given below to install Kendo dropdowns.

npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-l10n @angular/animations

Step 5

Learn to solve the Rubix Cube with the easiest method, memorizing only six algorithms.

Open app.module.ts file and add the information of Kendo dropdowns, which are installed.

  1. import { BrowserModule } from     '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  5. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  6. import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
  7. import { AppComponent } from './app.component';
  9. @NgModule({
  10. declarations: [
  11. AppComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule,
  16. HttpModule,
  18. BrowserAnimationsModule,
  20. DropDownsModule
  21. ],
  22. providers: [],
  23. bootstrap: [AppComponent]
  24. })
  25. export class AppModule { }

Step 6

Open app.component.html and write the code given below in it.
  1. <h1>{{title}}</h1>
  3. <div class="example-wrapper">
  4. <p>Favorite Fruits:</p>
  5. <kendo-combobox [data]="listItems" [allowCustom]="allowCustom">
  6. </kendo-combobox>
  7. </div>

Step 7

Open app.compoenent.ts and write the code given below in it.

app.component.ts
  1. import { Component } from '@angular/core';
  3. @Component({
  4. selector: 'app-combobox',
  5. templateUrl: './app.component.html',
  6. styleUrls: ['./app.component.scss']
  7. })
  8. export class AppComponent {
  9. title = 'Kendo Combo Box';
  10. public allowCustom: boolean = true;
  11. public listItems: Array<string> = ["Apple", "Orange", "Grapes"];
  12. }

The listItem array is created, which is used to populate the combo box control and the selector (app-combobox) is defined.

Step 8

Open an Index file and write the code given below.

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>KendoDropdown</title>
  6. <base href="/">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <link rel="icon" type="image/x-icon" href="favicon.ico">
  10. </head>
  11. <body>
  12. <app-combobox>Loading...</app-combobox>
  13. </body>
  14. </html>

Index is the main page, which is used to display the control based on the selector(app-combobox).

Step 9

Configure the theme
In this step, we are going to install Kendo default theme into our Application. Use the command given below to install the theme
npm install --save @progress/kendo-theme-default

Open the style.scss and write the code given below in it.

@import "~@progress/kendo-theme-default/scss/all"

The code given above is used to integrate Kendo's default theme into our Application.

Step 10

Build the Application

Use the command giiven below to build and run the Application.

ng-serve

Result


References
  1. http://www.telerik.com/kendo-angular-ui/getting-started
  2. http://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/data-binding/
I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.