Obtaining the Enum key in Angular using the Enum type instead of a string value

Question

Obtaining the Enum key in Angular using the Enum type instead of a string value

Is there a way to retrieve the key of an enum not as a string, but with the enum itself? https://stackblitz.com/edit/typescript-av8rkx

enum Widgets {
  Foo = "this is foo",
  Bar = "this is bar"
}

const current = "this is foo";
console.info(current); // 'this is foo';

let enumKey = Object.keys(Widgets)[Object.values(Widgets).indexOf(current)];
console.log(typeof(enumKey)) // here it returns string

I want to be able to access the enum using the 'enumKey' mentioned above.

Widgets[enumKey]

Unfortunately, this method is not working for me. Can anyone provide assistance on how to achieve this? Thanks

typescript enums

Answer 1

Answer №1

If you ever need to create a "reverse" enum, the following code snippet demonstrates how to achieve it:

type Inverted<T extends Record<any, string>> = { [K in keyof T as T[K]]: K }
type InvertedColors = Inverted<typeof Colors>
const InvertedColors: InvertedColors =
    Object.entries(Colors)
        .reduce((acc, [key, value]) => (acc[value] = key, acc), {} as any)

const currentColor = "this is red"
const enumKeyColor = InvertedColors[currentColor] // "Red"
const nextColor = Colors[enumKeyColor] // Colors.Red

Answer 2

If you ever need to create a "reverse" enum, the following code snippet demonstrates how to achieve it:

type Inverted<T extends Record<any, string>> = { [K in keyof T as T[K]]: K }
type InvertedColors = Inverted<typeof Colors>
const InvertedColors: InvertedColors =
    Object.entries(Colors)
        .reduce((acc, [key, value]) => (acc[value] = key, acc), {} as any)

const currentColor = "this is red"
const enumKeyColor = InvertedColors[currentColor] // "Red"
const nextColor = Colors[enumKeyColor] // Colors.Red

Obtaining the Enum key in Angular using the Enum type instead of a string value

Answer №1

Similar questions

Adonisjs latest version (v5) model creation command malfunctioning

Enhance your coding experience with Angular Apollo Codegen providing intelligent suggestions for anonymous objects

Combine Sonarqube coverage with Istanbuljs/NYC for enhanced code analysis

Error: Trying to access property '2' of a null value

Convert your socket.io syntax to TypeScript by using the `import` statement instead

Prevent a React component from unnecessarily re-rendering after a property has been set

When attempting to register a custom Gamepad class using GamepadEvent, the conversion of the value to 'Gamepad' has failed

When object signatures match exactly, TypeScript issues a warning

Conceal object from inventory upon clicking

Angular version 6 allows for specifying input types as numbers and displaying two decimal digits after the comma

When using Typescript type aliases, make sure to let Intellisense display the alias name instead of the source

Configuring rows in React datagrid

Having trouble getting ng-click to function properly in TypeScript

Issues with loading NextJS/Ant-design styles and JS bundles are causing delays in the staging environment

Angular progress tracker with stages

Can a reducer be molded in ngrx without utilizing the createReducer function?

What is the TypeScript syntax for indicating multiple generic types for a variable?

Disabling the last control in a formGroup when sorting an array with Angular

Exploring the potential of TypeScript with native dynamic ES2020 modules, all without the need for Node.js, while also enhancing

Methods to acquire the 'this' type in TypeScript