Tips for creating an Angular component that can receive a single value from a choice of two different lists

Question

Tips for creating an Angular component that can receive a single value from a choice of two different lists

My angular component requires a value that belongs to one of two lists.

For example:

@Input()
public type!: enumA | enumB;

However, this setup becomes problematic when the enums share values or are linked together in a way I find undesirable. I would prefer to avoid using string enums as well. What is the most effective way to clearly distinguish between receiving enumA.Foo or enumB.Foo?

In this illustration, enums are utilized but I am open to alternative solutions.

angular typescript enums union-types

Answer 1

Answer №1

Unfortunately, this is just how enums function. They are essentially a way to assign names to numerical values for easier understanding. Ultimately, they boil down to numbers, making it difficult to determine the original array based solely on a number like 3.

Below is an example in TypeScript, or you can view it on TS Playground

 enum enumA {
    One = 1,
    Two = 2,
    Three = 3
 }

  enum enumB {
    One = 1,
    Two = 2,
    Three = 3
 }
 
 var x: enumA | enumB = enumB.Three;

 console.log(typeof x, x);

 console.log(typeof enumB, enumB)

This will output:

"number",  3 

"object",  {
  "1": "One",
  "2": "Two",
  "3": "Three",
  "One": 1,
  "Two": 2,
  "Three": 3
}

Enums do not provide enough information to trace back to their source as desired.

If you must use enums, one workaround is to include a second property to store the entire enum and its value separately:

TS Playground link

 enum enumA {
    One = 1,
    Two = 2,
    Three = 3
 }

  enum enumB {
    One = 1,
    Two = 2,
    Three = 3
 }

 interface IGenericEnum {
   [s: number]: string
 }
 
function test<T = IGenericEnum>(list: T, val: keyof T){
   console.log(list, val);
}

test(enumA, "One");

While not perfect, this approach provides a bit more information by separating enum values into individual fields. It remains strongly typed, preventing errors like attempting test(enumA, "Foo").

Answer 2

Unfortunately, this is just how enums function. They are essentially a way to assign names to numerical values for easier understanding. Ultimately, they boil down to numbers, making it difficult to determine the original array based solely on a number like 3.

Below is an example in TypeScript, or you can view it on TS Playground

 enum enumA {
    One = 1,
    Two = 2,
    Three = 3
 }

  enum enumB {
    One = 1,
    Two = 2,
    Three = 3
 }
 
 var x: enumA | enumB = enumB.Three;

 console.log(typeof x, x);

 console.log(typeof enumB, enumB)

This will output:

"number",  3 

"object",  {
  "1": "One",
  "2": "Two",
  "3": "Three",
  "One": 1,
  "Two": 2,
  "Three": 3
}

Enums do not provide enough information to trace back to their source as desired.

If you must use enums, one workaround is to include a second property to store the entire enum and its value separately:

TS Playground link

 enum enumA {
    One = 1,
    Two = 2,
    Three = 3
 }

  enum enumB {
    One = 1,
    Two = 2,
    Three = 3
 }

 interface IGenericEnum {
   [s: number]: string
 }
 
function test<T = IGenericEnum>(list: T, val: keyof T){
   console.log(list, val);
}

test(enumA, "One");

While not perfect, this approach provides a bit more information by separating enum values into individual fields. It remains strongly typed, preventing errors like attempting test(enumA, "Foo").

Tips for creating an Angular component that can receive a single value from a choice of two different lists

Answer №1

Similar questions

The View does not get updated by Angular's *ngFor directive

Issue encountered when attempting to access disk JSON data: 404 error code detected

Facing a problem with querying interfaces and types in TypeScript

Node OOM Error in Webpack Dev Server due to Material UI Typescript Integration

Mastering the art of utilizing Angular Material's custom-palette colors for maximum impact. Unle

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

NGXS Alert: Unable to resolve parameters for TranslationEditorState: (?)

Encountering a Nuxt error where properties of null are being attempted to be read, specifically the 'addEventListener' property. As a result, both the default

Dealing with challenges in integrating ngx-masonry with Angular 14

Having trouble compiling Angular CLI version 8.3.21 with the command ng serve

Navigating through object keys in YupTrying to iterate through the keys of an

Creating a dynamic return statement in typescript: A step-by-step guide

Troubleshooting Angular: Issues with Table Data Display and Source Map Error

Creating HTML content in TypeScript with NativeScript using document.write()

Modify a property within an object and then emit the entire object as an Observable

Preventing Firebase duplicates leads to the error of not being able to read the property 'apps'

An error occurred because the property 'coSearchCriteria' is being read from an undefined source in Angular Karma/Jasmine

Unit test does not show the PrimeNG menubar start directive

Is there a way to retrieve the number of swipe up interactions from Instagram story insights using the graph API

Strategies for handling uncaught promise rejections within a Promise catch block