DevExtreme Angular - Customize the Appearance

You can configure the drop-down field using the dropDownOptions object that contains fields described in the Popup Configuration section. You can also specify a custom template for the drop-down button in the dropDownButtonTemplate option.

HTML
TypeScript
  • <dx-drop-down-box
  • [(value)]="selectedFruit"
  • [(opened)]="isDropDownBoxOpened"
  • dropDownButtonTemplate="dropDownButtonTemplate"
  • [dataSource]="fruits">
  • <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" class="custom-icon">
  • </div>
  • </dx-drop-down-box>
  • import { DxDropDownBoxModule, DxListModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • selectedFruit = this.fruits[0];
  • isDropDownBoxOpened = false;
  • changeDropDownBoxValue = function (args) {
  • this.selectedFruit = args.addedItems[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDropDownBoxModule,
  • DxListModule
  • ],
  • // ...
  • })