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>
- <dx-list
- [dataSource]="fruits"
- selectionMode="single"
- (onSelectionChanged)="changeDropDownBoxValue($event)">
- </dx-list>
- <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: this.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%;
- }
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.