Post
Ask Question

Kendo DropDownList For Angular 2

Introduction:

This blog tells you how to implement the kendo DropDownList for Angular 2. For the demo purpose, I have created a kendo DropDownList for Angular 2 with a simple data binding of complex array.

Before going through this blog, I highly recommend to read my previous article to get an idea about how to use/configure Kendo UI component for Angular 2

Kendo DropDownList for Angular 2

To use the kendo DropDownList for Angular 2, we need to install the kendo DropDownList package. Just pass the below command to install it.

  1. npm install -S @progress/kendo-angular-dropdowns  

Once the installation is successful, you will get the following message. Here, we can neglect the warning.
 

After installation, you will get the kendo DropDownList package folder under "node_modules -> @progress" in your project.

Write the following code in app/app.component.ts

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.     selector: 'app-root',  
  5.     template: `  
  6.     <kendo-dropdownlist  
  7.         [data]="listItems"  
  8.         [textField]="'text'"  
  9.         [valueField]="'value'"  
  10.     >  
  11.     </kendo-dropdownlist>  
  12.   `  
  13. })  
  14. export class AppComponent {  
  15.     public listItems: Array<{ text: string, value: number }> = [  
  16.         { text: "India", value: 1 },  
  17.         { text: "USA", value: 2 },  
  18.         { text: "China", value: 3 }  
  19.     ];  
  20. }  

textField and valueField properties are bound to the data text and value in the array respectively.

app/app.module.ts

Import the kendo DropDownList Control in your application.
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { DropDownsModule } from '@progress/kendo-angular-dropdowns';  
  4. import { HttpModule } from '@angular/http';  
  5.   
  6. import { AppComponent } from './app.component';  
  7.   
  8. @NgModule({  
  9.     imports: [BrowserModule, DropDownsModule, HttpModule],  
  10.     declarations: [AppComponent],  
  11.     bootstrap: [AppComponent]  
  12. })  
  13.   
  14. export class AppModule { }   

Index.html

  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>KendoAngular</title>  
  6.     <base href="/">  
  7.   
  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.       
  13.     <h3> Kendo DropDown List for Angular 2</h3>   
  14.     <br />  
  15.      
  16.     <app-root>Loading...  
  17.           
  18.     </app-root>  
  19.       
  20. </body>  
  21. </html>   
Result
 


I hope, you have enjoyed this blog. Your valuable feedback, questions,  and comments about this blog are always welcome.

Get the source code from GitHub.