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
- ],
- // ...
- })
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.