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';
  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';
  6. import { AppComponent } from './app.component';
  8. @NgModule({
  9. imports: [BrowserModule, DropDownsModule, HttpModule],
  10. declarations: [AppComponent],
  11. bootstrap: [AppComponent]
  12. })
  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="/">
  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>
  13. <h3> Kendo DropDown List for Angular 2</h3>
  14. <br />
  16. <app-root>Loading...
  18. </app-root>
  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.