Angular 4 Kendo Combobox Binding

How To CREATE Kendo UI ComboBox in Angular 4?

Step 1- Installation

npm install -g @angular/cli
ng new my-first-angular-project --style=scss
cd my-first-angular-project

Step 2 -Once installed, import the NgModule of the components you need

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { AppComponent }   from './app.component';
import { EventLogComponent }   from './event-log.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropDownsModule
  ],
  declarations: [
    AppComponent,
    EventLogComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { }

Example -

@Component({
  selector: 'my-app',
  template: `
    <kendo-combobox
        [data]="users"
        [textField]="'text'"
        [valueField]="'value'"
        [placeholder]="'Users'"
    >
    </kendo-combobox>
  `
})
class AppComponent {
    public users: Array<{ text: string, value: number }> = [
        { text: "Anil", value: 101 },
        { text: "Sunil", value: 202 },
        { text: "Sushil", value: 303 }
    ];
}

Result -

I hope you are enjoying with this post! Please share with you friends. Thank you so much!