Kendo Combo Box with Angular in MVC Razor

We have used kendo combo box in MVC razor, but what if we use Angular to bind the same! Lets see how to use kendo with Angular

<select kendo-combo-box
   id="AnyID"
   k-data-text-field="'Key'"
   k-data-value-field="'Value'"
   k-filter="'contains'"
   ng-disabled="true"
   k-auto-bind="true"
   k-min-length="3"
   k-ng-model="model.ComboProperty"
   k-on-change="FunctionName()"
   style="width:73%;">
</select>

As you see the above snippet, the element is same as Select with the different pre-defined attributes for kendo and Angular.

kendo-combo-box - Defines the kendo combobox to be displayed on the UI.
k-data-text-field - Defines the text value for the combo box data.
k-data-value-field - Defines the value field for the combo box data.
k-filter - As we know in combo box, we can take user input for few letters and then the data source gets filtered.
ng-disabled - Angular attribute to disable the combo box on first load.
k-auto-bind - Defines the property auto bind for the data source of combo box.
k-min-length - Defines the minimum characters to be input to auto complete the filter.
k-ng-model - Here instead of normal Angular attribute, ng-model, k-ng-model is used in order to set the kendo combo box model property. This by default takes the k-data-value-field.
k-on-change - This function is triggered when the change event is fired. Instead of ng-change which by default will require ng-model attribute, we use k-on-change.

Hope this simple snippet comes in handy for developers using kendo and Angular. Similar can be used for Kendo Drop down list as well.