DevExtreme Angular - Customize the Appearance

You can customize the text field and the drop-down button using the fieldTemplate and dropDownButtonTemplate. To adjust the drop-down field, use the dropDownOptions object that contains options described in the Popup Configuration section.

HTML
TypeScript
CSS
  • <dx-drop-down-box
  • [(value)]="selectedFruit"
  • [(opened)]="isDropDownBoxOpened"
  • fieldTemplate="fieldTemplate"
  • dropDownButtonTemplate="dropDownButtonTemplate"
  • [dataSource]="dataSource">
  • <dxo-drop-down-options
  • title="Fruits"
  • [showTitle]="true"
  • [fullScreen]="true"
  • [showCloseButton]="true">
  • </dxo-drop-down-options>
  • <div *dxTemplate="let contentData of 'content'">
  • <dx-list
  • [dataSource]="fruits"
  • selectionMode="single"
  • (onSelectionChanged)="changeDropDownBoxValue($event)">
  • </dx-list>
  • </div>
  • <div *dxTemplate="let data of 'dropDownButtonTemplate'">
  • <img src="images/icons/custom-dropbutton-icon.svg">
  • </div>
  • <div *dxTemplate="let data of 'fieldTemplate'">
  • <div class="custom-item">
  • <img src="{{data.image}}">
  • <div class="product-name">
  • <dx-text-box
  • [value]="data.text"
  • [readOnly]="true">
  • </dx-text-box>
  • </div>
  • </div>
  • </div>
  • </dx-drop-down-box>
  • import { DxDropDownBoxModule, DxListModule, DxTextBoxModule } from "devextreme-angular";
  • import DataSource from "devextreme/data/data_source";
  • import ArrayStore from "devextreme/data/array_store";
  • // ...
  • export class AppComponent {
  • fruits = [
  • { id: 1, text: "Apples", image: "images/Apples.svg" },
  • { id: 2, text: "Oranges", image: "images/Oranges.svg" },
  • { id: 3, text: "Lemons", image: "images/Lemons.svg" },
  • { id: 4, text: "Pears", image: "images/Pears.svg" },
  • { id: 5, text: "Pineapples", image: "images/Pineapples.svg" }
  • ];
  • dataSource: DataSource;
  • selectedFruit = this.fruits[0];
  • isDropDownBoxOpened: Boolean = false;
  • constructor() {
  • this.dataSource = new DataSource({
  • store: new ArrayStore({ data: fruits, key: "id" })
  • });
  • }
  • changeDropDownBoxValue = function (args) {
  • this.selectedFruit = args.addedItems[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDropDownBoxModule,
  • DxListModule,
  • DxTextBoxModule
  • ],
  • // ...
  • })
  • ::ng-deep .custom-item {
  • position: relative;
  • min-height: 30px;
  • }
  • ::ng-deep .custom-item > img {
  • left: 1px;
  • margin-top: 3px;
  • max-height: 30px;
  • width: auto;
  • position: absolute;
  • }
  • ::ng-deep .product-name {
  • display: inline-block;
  • padding-left: 45px;
  • text-indent: 0;
  • line-height: 30px;
  • font-size: 15px;
  • width: 100%;
  • }