23 Best Kendo UI Angular 2 DropDownList Actions [How To]

Best Ways to Bind Complex DDL Using Kendo Angular2 [How To]

“How to Bind to Arrays of Complex Data in DropDownList using Angular 2”?

The “Kendo UI Angular 2 DropDownList” is a form component and used binds the data list and chooses a single predefined value as per you from a dropdown list.

When we use complex objects to bind DropDownList, In that case we will need to define properties (text-field and value-field). Also it will extract the text and value’s values from the selected DDL item. This process will set the selected DDL’s text and value.

Stayed Informed – Live demo Plunker

Example as,

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <p>Select Item:</p>
        <kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
        >
    </kendo-dropdownlist>
    </div>
  `
})
class AppComponent {
    public listItems: Array<{ text: string, value: number }> = [
        { text: "1001-Item 1", value: 1 },
        { text: "1002-Item 2", value: 2 },
        { text: "1003-Item 3", value: 3 },
        {text: "1004-Item 4", value: 4 }
    ];
}

References,

I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.