Angular 4 kendo-combobox Binding

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!

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.