How to change Kendo autocomplete filed slimier as Angular material input fields?

Question

I want to change the kendo autocomplete filed the same as the angular material inputs.

the kendo UI autocomplete field is like below

I want to change above kendo UI autocomplete field is like below

the HTML for the kendo UI autocomplete field is like below

<div class="example-wrapper">
    <kendo-autocomplete [data]="listItems" [placeholder]="'e.g. Andorra'">
    </kendo-autocomplete>
</div>

the HTML for the material UI is like below.

<mat-form-field class="example-full-width">
    <input type="text" placeholder="Groups"  matInput [formControl]="queryField">
</mat-form-field>

is it possible to do that?

Answer 1

If you are using kendo, you can wrap kendo components in material design.

you can install kendo-theme-material in your project.

npm install --save @progress/kendo-theme-material

And in your angular.json file add path to kendo-theme-material.

{
  "apps": [
    {
      "styles": [
        "node_modules/@progress/kendo-theme-material/dist/all.css"
      ]
    }
  ]
}

It will convert all your kendo components in material design.