Guide to setting an enum as the dataSource for a DevExtreme select dropdown box

Question

Guide to setting an enum as the dataSource for a DevExtreme select dropdown box

I am seeking assistance in populating a select box with enum values that belong to a class property. Below is my HTML:

<div class="channel-visible">
        <div class="title">Visibility</div>
        <dx-select-box
        [(value)]="newChannel.visibility"
        [dataSource]="channelVisibility"
        >

        </dx-select-box>
    </div>

Here is the component code:

channelVisibility = EChannelVisibility;
newChannel = new Channel();

The enum type EChannelVisibility is a property of the Channel class. When attempting to implement it in the HTML above, I encounter the following error: https://i.sstatic.net/6RL0f.png

angular typescript frontend devextreme

Answer 1

Answer №1

Here's a clever solution: you can create a string array based on your enum.

import { Component } from '@angular/core';

enum EChannelVisiblity {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  visibility!: any;
  channelVisibility!: any;

  constructor() {
    var arr = [];
    for (var i in EChannelVisiblity) {
      arr.push(i.toString());
    }

    this.channelVisibility = arr;
  }
}

Answer 2

Here's a clever solution: you can create a string array based on your enum.

import { Component } from '@angular/core';

enum EChannelVisiblity {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  visibility!: any;
  channelVisibility!: any;

  constructor() {
    var arr = [];
    for (var i in EChannelVisiblity) {
      arr.push(i.toString());
    }

    this.channelVisibility = arr;
  }
}

Guide to setting an enum as the dataSource for a DevExtreme select dropdown box

Answer №1

Similar questions

Replace interface with a string

Error (2322) Occurs When TypeScript Class Implements Interface with Union Type Field

Modify the ngb-timepicker formatting to output a string instead of an object

Retrieving selected item values in Angular 2 using ng2-completer

Angular's Recursive Issue with the Execution Order of RxJS Observables

Tips for effectively implementing React.usecallback

Using Angular to facilitate communication between administrators and students in Azure's webpubsub service; enabling messages to be sent in either

How can I get rid of the table borders and set colors for every other row in the

Error with an Array of Objects in an Array when using Angular and Typescript

When a React component written in TypeScript attempts to access its state, the object becomes

Encountering an issue while trying to install font-awesome in an Angular project

Creating a complete fullstack application in Angular 2 starting from the basics

Tips for enhancing parameters in TypeScript/Angular methods

Any problems with TypeLite involving generics or Enums?

Error encountered when attempting to retrieve token from firebase for messaging

Vue version 3 is encountering an issue with a module that does not have an exported member in the specified path of "../../node_modules/vue/dist/vue"

Submitting a Form with Request Body using Angular 2

Vue.js: The $attrs and $listeners properties are both read-only

Angular TypeScript test checking file size with Jasmine

The draggable container refuses to move despite implementation of Hammerjs and Angular