Is it possible to modify an enum in Angular depending on a condition?

Question

Is it possible to modify an enum in Angular depending on a condition?

Recently, I decided to create an enum that holds some commonly used colors throughout my application.

export enum SeverityColor {
    None = '#2196F3',
    Low = '#39B54a',
    Medium = '#FCEE21',
    High = '#F7931E',
    Critical = '#F44336',
}

Now, the team is exploring adding a theme switch feature - transitioning between dark and light modes. In order to achieve this, the colors defined in the enum must dynamically update based on the active mode. While it may not be considered best practice, I am wondering if there is a way to update this Enum conditionally rather than manually modifying each reference in the codebase.

If anyone has any suggestions or alternative approaches to tackle this challenge, I would greatly appreciate your input. Thank you!

angular typescript enums

Answer 1

Answer №1

The topic at hand is all about typescript. In simpler terms, enums in typescript are essentially converted to a basic javascript object during the compilation process. This implies that from a javascript viewpoint, it would be feasible to create something similar to this:

SeverityColor.Low = '#BADA55';

Nevertheless, typescript will raise an objection if you attempt this, indicating that Low is set as readonly. One way to get around this restriction is by asserting the type to any, as shown below:

(SeverityColor as any).Low = '#BADA55';

In my opinion, I don't consider this approach to be very prudent, but hey, it's an option.

Answer 2

The topic at hand is all about typescript. In simpler terms, enums in typescript are essentially converted to a basic javascript object during the compilation process. This implies that from a javascript viewpoint, it would be feasible to create something similar to this:

SeverityColor.Low = '#BADA55';

Nevertheless, typescript will raise an objection if you attempt this, indicating that Low is set as readonly. One way to get around this restriction is by asserting the type to any, as shown below:

(SeverityColor as any).Low = '#BADA55';

In my opinion, I don't consider this approach to be very prudent, but hey, it's an option.

Answer 3

Answer №2

While attempting to incorporate a ternary operator within the enum, I encountered an issue: The problem at hand is that 'string' cannot be assigned to type 'number' as mandated for computed enum member values. From what I grasp, there exists a distinction between const-based and string-based enums, where in a string-based enum, string values are handled before being allocated to the member key. Though I vaguely recall resolving this dilemma by utilizing a type or const assertion, or by casting the member value some time back, I believe the most optimal approach would be to use:

const isDark = window.matchMedia("(prefers-color-scheme:dark)").matches

or

const currentTheme = document.documentElement.getAttribute("data-theme")

to choose between light and dark mode using two sets of enum SeverityColor.

Answer 4

While attempting to incorporate a ternary operator within the enum, I encountered an issue: The problem at hand is that 'string' cannot be assigned to type 'number' as mandated for computed enum member values. From what I grasp, there exists a distinction between const-based and string-based enums, where in a string-based enum, string values are handled before being allocated to the member key. Though I vaguely recall resolving this dilemma by utilizing a type or const assertion, or by casting the member value some time back, I believe the most optimal approach would be to use:

const isDark = window.matchMedia("(prefers-color-scheme:dark)").matches

or

const currentTheme = document.documentElement.getAttribute("data-theme")

to choose between light and dark mode using two sets of enum SeverityColor.

Is it possible to modify an enum in Angular depending on a condition?

Answer №1

Answer №2

Similar questions

Leverage JavaScript Object Properties within Angular 5 Components

Remember to always call "done()" in Typescript + Mocha/Chai when dealing with async tests and hooks. Additionally, when returning a Promise, make sure it resolves correctly

Frequent occurrence when a variable is utilized prior to being assigned

Creating SVGTextElement elements with appropriate types prior to appending them

What is the best way to include a json file in an AngularJS controller of a MEAN stack app being run locally?

I am having issues with npm starting properly as it is unable to locate the module 'worker_threads'

Issues with getOptionLabel in Material UI

"How can I dynamically set the text for a radio button using Reactive Forms? Also, how do I capture the selected radio button value and the question title

Exploring the power of props in Vue3/Nuxt3: A guide to utilizing props directly in the

Data Binding in Angular using TypeScript Classes

Different Ways to Validate Angular 2 FormGroups

Ordering an array in Angular 2: A step-by-step guide

Angular 6 - Struggling to translate "Invalid Date" to a valid date using the "DatePipe" filter

What are the steps for customizing the interface in TypeScript?

Is there a way to successfully deploy an angular 6 application on wamp?

The Angular 2 Code Snippet extension created by Mads is experiencing issues within Visual Studio 2017

Type definitions in Typescript for the style property of Animated.View

Should I opt for 'typeof BN' or the BN Constructor when working with TypeScript and "bn.js"?

Having trouble getting @types/express-session to function properly. Any suggestions on how to fix it?

Component in Angular2 encountering a null value