Tips on retrieving enum values in typescript

Having trouble retrieving values from an enum? Check out this snippet of code:

export const enum ComplianceType {
  ENGINEER_ASSESMENT = 'ENGINEER_ASSESMENT',
  CONSTRUCTION_COMPLIANCE = 'CONSTRUCTION_COMPLIANCE',
  ARCHITECTURE_ASSIGNMENT = 'ARCHITECTURE_ASSIGNMENT',
  BLUEPRINT_APPROVAL = 'BLUEPRINT_APPROVAL',
  THERMAL_COMPLIANCE = 'THERMAL_COMPLIANCE',
  ELECTRICITY_COMPLIANCE = 'ELECTRICITY_COMPLIANCE',
  TELECOMUNICATION_COMPLIANCE = 'TELECOMUNICATION_COMPLIANCE',
  WATER_COMPLIANCE = 'WATER_COMPLIANCE',
  OTHER_1 = 'OTHER_1',
  OTHER_2 = 'OTHER_2',
}

In the .ts file:

import { ICompliance, ComplianceType } from 'app/shared/model/compliance.model';

Attempting to access the values with: 

complianceTypeList: ComplianceType;

If you're unsure on how to get values from an enum in TypeScript, seeking advice would be helpful.

angulartypescriptangular7

Answer №1

Your code structure is incorrect.

Instead of assigning, or attempting to assign Enums as variables, simply use export enum ComplianceType.

export enum ComplianceType {
  ENGINEER_ASSESMENT = 'ENGINEER_ASSESMENT',
  CONSTRUCTION_COMPLIANCE = 'CONSTRUCTION_COMPLIANCE',
  ARCHITECTURE_ASSIGNMENT = 'ARCHITECTURE_ASSIGNMENT',
  BLUEPRINT_APPROVAL = 'BLUEPRINT_APPROVAL',
  THERMAL_COMPLIANCE = 'THERMAL_COMPLIANCE',
  ELECTRICITY_COMPLIANCE = 'ELECTRICITY_COMPLIANCE',
  TELECOMUNICATION_COMPLIANCE = 'TELECOMUNICATION_COMPLIANCE',
  WATER_COMPLIANCE = 'WATER_COMPLIANCE',
  OTHER_1 = 'OTHER_1',
  OTHER_2 = 'OTHER_2',
}

After that, you can easily import the Enums into the necessary Class or component.

import { ComplianceType } from 'app/shared/model/compliance.model';

This approach works flawlessly on this platform.

Answer №2

To access the keys of your enums, you can use Object.keys(EnumType);. If you need to retrieve its values instead, you can utilize Object.values(EnumType);. However, it seems like you are attempting to assign an entire Enum to a single Enum property type in this case.

One way to achieve this is by:

complianceType: ComplianceType;

complianceType = ComplianceType.ENGINEER_ASSESMENT;

It is not logical to assign a type to a variable of this kind. It simply does not make sense.

Answer №3

To retrieve a value from an Enum, simply treat it as an array and access the value using the specific key:

ComplianceType["ARCHITECTURE_ASSIGNMENT"]

This method should return the desired value.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2: Integrating a service into a class

I am working on an Angular class that represents a shape. My goal is to be able to create multiple instances of this class using a constructor. The constructor requires several arguments that define the properties of the shape. constructor(public center: ...

typescriptdependency-injectionangular

Issue encountered while attempting to execute "npm install --save firebase"

When attempting to run the command "npm install --save firebase", I encountered the error below: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="482e3b2d3e2d263c3b0879667a667c">[email protected]</a> install /U ...

node.jsangularfirebasenpm

Showing information in a modal dialog in an Angular 4 application

As an Angular 4 developer, I am working on an application where I need to display data in a dialog. To achieve this, I am using @Output to pass data from the child component to the parent component. In the parent component, my code looks like this: expor ...

javascriptangular

Customizing the colors of Angular Material themes

Currently, I am looking to completely change the theme of my angular 8 application. Within a scss file, I have the following code: @import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common st ...

angularangular-material

Utilizing a function within the catchError method

A function has been defined to handle errors by opening a MatSnackBar to display the error message whenever a get request encounters an error. handleError(err: HttpErrorResponse) { this.snackBar.open(err.message) return throwError(err) } When subs ...

angulartypescripterror-handlingrxjs

Implementing a filter function in Angular 2 and Ionic 2 that is dependent on *ngFor on a separate page

I recently created a simple ion-list along with a filter to display items based on a specific key:value pair. I'm not entirely sure if I've implemented it correctly, so any suggestions on a better approach would be greatly appreciated. LIST.HTML ...

angularjsangulardependenciesangularjs-filterionic2

Transferring AgGrid context in a functional React component

I have been working on a component that utilizes AgGrid to display a table, with the data sourced from a Redux selector. My goal is to include a button within a cell in the table that triggers an action based on the specific row's data. However, I a ...

reactjstypescriptreduxag-grid

Error Message: Unable to access 'map' property of undefined in TSX file

Component for displaying attendees in an activity interface IProps { attendees: IAttendee[] } export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => { return ( <List horizontal> {attendees.ma ...

reactjstypescriptasp.net-core-webapireact-tsx

Error: The function type 'Dispatch<SetStateAction<string>>' cannot be assigned to the type '(value: OptionValue) => void'

I recently dove into the world of integrating Typescript generics with React after reading this insightful article. I followed the code provided in the article, but encountered the following error: Type 'Dispatch<SetStateAction<string>>&ap ...

reactjstypescripttsx

utilize console.log within the <ErrorMessage> element

Typically, this is the way the <ErrorMessage> tag from Formik is utilized: <ErrorMessage name="email" render={(msg) => ( <Text style={styles.errorText}> ...

javascriptreactjstypescriptreact-nativeformik

Prevent display of host attributes in Angular 2

My Angular component features a title property. // Here is the code snippet for the component: @Input('title') public title: string // This is how you can use the component in your code: <dialog [title]="bar"></foo> However, when t ...

angular

The Angular service uses httpClient to fetch CSV data and then passes the data to the component in JSON format

I'm currently working on an Angular project where I am building a service to fetch CSV data from an API server and convert it to JSON before passing it to the component. Although the JSON data is successfully logged in the console by the service, the ...

jsonangularcsvobservablehttpclient

When using Angular NGXS, calling `dispatch` method can lead to multiple

Currently, I am sending data from one component to be used in other components. However, I have noticed that when I dispatch the data, the subscribe function is being called multiple times. On a button click, I am dispatching the following: appStore.disp ...

angularngxs

Unable to integrate BokehJS with Angular8

Here is the error log that appeared in the browser: AppComponent.html:1 ERROR TypeError: FlatBush is not a constructor at new SpatialIndex (vendor.js:90501) at AnnularWedgeView.push../node_modules/bokehjs/build/js/lib/models/glyphs/xy_glyph.js.XYG ...

angularwebpackangular8bokehjs

Tips for showing various tooltip text when iterating through a list?

I am currently working on a project where I am looping through a list and attempting to assign different tooltip text to various icons. However, I am struggling with the implementation. Here is a snippet of my code: <React.Fragment key={sv.key ...

reactjstypescriptmappingtooltip

encountered an error stating module '@angular/compiler-cli/ngc' could not be located while attempting to execute ng serve

Here is the content of my package.json file: { "name": "cal-euc", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build&qu ...

angularnpm

Enhancing Angular Form Control with ASP.NET Core 7 Web API Date Serialization

The Person class has a property called Birthday, which is defined as type DateTime. public class Person { public string Name { get; set; } public DateTime Birthday { get; set; } } Within my controller, I have an endpoint setup like this: [HttpGet( ...

angularangular-reactive-forms.net-7.0asp.net-web-api-routing

Exploring the possibilities of utilizing package.json exports within a TypeScript project

I have a local Typescript package that I am importing into a project using npm I ./path/to/midule. The JSON structure of the package.json for this package is as follows: { "name": "my_package", "version": "1.0.0&q ...

javascriptnode.jstypescriptpackage.json

The TypeScript compiler is unable to locate the name 'window'

Within my Meteor/React project, I encounter the following line of code: let gameId = window.prompt("Please input the ID of the game you would like to load."); The TypeScript compiler presents an error during transpiling: Cannot find name 'window&apo ...

javascripttypescriptmeteor

Typescript error: The value "X" cannot be assigned to this type, as the properties of "Y" are not compatible

Disclaimer: I am relatively new to Angular2 and typescript, so please bear with me for any errors. The Challenge: My current task involves subtracting a start date/time from an end date/time, using the result in a formula for my calculation displayed as " ...

angulardatetypescript