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.
Next Recommended Reading Text Formatting In Kendo UI Grid With Angular