Choose from the Angular enum options

Question

Choose from the Angular enum options

I am working with an enum called LogLevel that looks like this:

export enum LogLevel {
    DEBUG = 'DEBUG',
    INFO = 'INFO',
    WARNING = 'WARNING',
    ERROR = 'ERROR'
}

My goal is to create a dropdown select element in my form, where each option displays the enum text as its label. Here is what I have so far:

<select>
     <option value="DEBUG">DEBUG</option>
     <option value="INFO">INFO</option>
     <option value="INFO">INFO</option>
     <option value="INFO">INFO</option>
</select>

Can anyone suggest a more efficient way to achieve this?

javascript angular typescript

Answer 1

Answer №1

Consider utilizing Object.values for transforming the enum into an array:

    <select>
      <option *ngFor="let logValue of Object.values(LogLevel)" [ngValue]="logValue">{{}logValue}</option>
   </select>

Answer 2

Consider utilizing Object.values for transforming the enum into an array:

    <select>
      <option *ngFor="let logValue of Object.values(LogLevel)" [ngValue]="logValue">{{}logValue}</option>
   </select>

Answer 3

Answer №2

Here's a straightforward solution:


 1. Content of app.component.ts:

export class AppComponent {
  keys = Object.keys;
  logLevel = LogLevel;

  selected = LogLevel.DEBUG;

  select(event: any) {
    const value = event.target.value;
    this.selected = value;
    console.log(this.selected);
  }
}

export enum LogLevel {
  DEBUG = 'DEBUG',
  INFO = 'INFO',
  WARNING = 'WARNING',
  ERROR = 'ERROR',
}

 2. Content of app.component.html

<select [(ngModel)]="selected" (change)="select($event)">
  <option *ngFor="let log of keys(logLevel)" [value]="logLevel[log]">
    {{ log }}
  </option>
</select>

For more information, please visit this link https://stackblitz.com/edit/angular-ivy-cuhnbw

Answer 4

Here's a straightforward solution:


 1. Content of app.component.ts:

export class AppComponent {
  keys = Object.keys;
  logLevel = LogLevel;

  selected = LogLevel.DEBUG;

  select(event: any) {
    const value = event.target.value;
    this.selected = value;
    console.log(this.selected);
  }
}

export enum LogLevel {
  DEBUG = 'DEBUG',
  INFO = 'INFO',
  WARNING = 'WARNING',
  ERROR = 'ERROR',
}

 2. Content of app.component.html

<select [(ngModel)]="selected" (change)="select($event)">
  <option *ngFor="let log of keys(logLevel)" [value]="logLevel[log]">
    {{ log }}
  </option>
</select>

For more information, please visit this link https://stackblitz.com/edit/angular-ivy-cuhnbw

Choose from the Angular enum options

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a mongoose model into another model?

React TSX file not recognizing JSON data stored in an HTML data attribute

Using async/await with Axios to send data in Vue.js results in different data being sent compared to using Postman

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Update the display using a button without the need to refresh the entire webpage

Using JavaScript, extract current date from an API data

Issue with JavaScript code for Google Maps API not functioning as expected

Load components dynamically and place them in a flexible position based on the context

Using jQuery to restrict users from entering a character consecutively more than three times within a single word

Save information in a session using html and javascript

Transforming a PHP cURL call to node.js

Having difficulty assigning a JSON key value to a variable

Retrieving Values from Components in Angular 6

Utilizing object properties to dynamically update components in VueJS

Is it possible to modify a JavaScript array variable without having to refresh the page by utilizing Ajax?

Issue with child prop not being updated despite changes in parent component

Is there internal access to the "access property" within the "data property" in JavaScript?

The unexpected occurence of the Onbeforeunload exception

Tips on navigating the scroller vertically as the user interacts with a selected div by scrolling up and down

Problem with finding Rails controller file in .coffee extension