app.component.html

<div class="dx-fieldset" style="width:50%">
  <div class="dx-fieldset-header">Standalone editors</div>
  <div class="dx-field">
    <div class="dx-field-label">State</div>
    <div class="dx-field-value">
      <dx-select-box
        [dataSource]="states"
        displayExpr="Name"
        valueExpr="ID"
        (onValueChanged)="onStateChanged($event)"
        [showClearButton]="true"
      ></dx-select-box>
    </div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">City</div>
    <div class="dx-field-value">
      <dx-select-box
        #citySelectBox
        displayExpr="Name"
        valueExpr="ID"
		[(value)]="selectedCityID"
        [dataSource]="cities"
      ></dx-select-box>
    </div>
  </div>
  <div class="dx-fieldset-header">In Form</div>
  <div class="dx-field">
    <dx-form
      [(formData)]="address"
      (onFieldDataChanged)="onFieldDataChanged($event)"
    >
      <dxi-item
        dataField="StateID"
        editorType="dxSelectBox"
        [editorOptions]='{ 
          dataSource: states,
          valueExpr: "ID",
          displayExpr: "Name",
          showClearButton: true }'
      >
        <dxo-label text="State"></dxo-label>
      </dxi-item>
      <dxi-item
        dataField="CityID"
        editorType="dxSelectBox"
        [editorOptions]='{ 
          dataSource: cities,
          valueExpr: "ID",
          displayExpr: "Name" }'
      >
        <dxo-label text="City"></dxo-label>
      </dxi-item>
    </dx-form>
  </div>
</div>