DevExtreme SelectBox using Angular 15 : How to add 'Select All' as first option via Html

Question

We have a need to duplicate the below simple html select in Angular 15 using a dropdown control from DevExpress like dx-select-box

<select  ng-model="selectedVal" ng-change="selectedValueChanged()">
     <option value="A">All</option>
     <option ng-repeat="item in itemArray" value="{{item.ID}}">{{item.Name}}</option>
</select>

Currently, we have this

<dx-select-box class="mt-1.5"
      valueExpr="ID"
      displayExpr="Name"
      [dataSource]="itemArray"
      [(value)]="selectedVal"
      (onValueChanged)="selectedValueChanged()">
</dx-select-box>

However, we need to add the first 'All" option with a value of 'A' in the dx-select-box. One option is to just add it to the itemArray in typescript code. However, we want to add it via html (possibly via dx select box template).

Does anyone know how to accomplish this with dx-select-box? Thanks

Answer 1

Unfortunately, achieving this isn't possible out of the box. Your suggestion of adding items programmatically to an array seems to be the only viable option if using the dx-select-box.

Alternative:

Utilizing the "dx-tag-box" with the batch-selection option enabled, might better suit your use case. You can see a demonstration of the tag box in action: Demo.