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

Javascript and JSON: Making Updates to Files

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

When forcibly closing a window, the disconnect event for Socket.IO sockets may not trigger as expected

Creating callback functions that vary based on input variables

Passport.js simply redirects to the failure page without invoking the LocalStrategy

best method for embedding javascript code within html (within a script tag)

What is the process for causing an Observable that already exists to emit specialized data?

.NET Core ViewModel with IFormFile attribute causing AJAX Request to freeze

Angular: Implementing a dialog in a component with an established constructor

Incorporate a Google Chart link by integrating it with a select handler

Showing an error message with matInput instead of a form control - is this possible?

Guide to parsing JSONP information using Express

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

Once the recursive function executes (utilizing requestAnimationFrame), socket.emit can finally be triggered

The data-src tags are functioning properly in the index.html file, but they are not working correctly in angular

Having trouble resolving the error "Cannot find name CSSTranslate" while working with VSCode and tsc? Let's tackle this issue together

Looping through NavItems component using JavaScript or Angular

What is the best way to dynamically import two css frameworks in React?

Tips for implementing daterangepicker js in an Angular 2 project

Comparing Fetch and Axios: Which is Better?