The export enumeration in Typescript-Angular is not defined

I've encountered a strange issue in my Angular project. I have some components and enums set up, and everything was working fine with one component using the enums. But when I tried to implement the same enums in other components, they are returning "undefined."

The Component where Enums Work:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import * as moment from 'moment';
import { from } from 'rxjs';
import { WEEKLY_SMART_POINTS } from '../constants';
import { Activity } from '../dom/profile/Activity';
import { Gender } from '../dom/profile/Gender';
import { Goal } from '../dom/profile/Goal';
import { Profile } from '../dom/profile/Profile';
import { ProfileService } from '../services/profile.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.page.html',
  styleUrls: ['./profile.page.scss'],
})
export class ProfilePage implements OnInit {
  eGender = Gender;
  eActivity = Activity;
...

Components where Enums Return Undefined:

import { Component, OnInit } from '@angular/core';
import { Portion } from '../dom/products/Portion';
import { Product } from '../dom/products/Product';
import { Nutrition } from '../dom/products/Nutrition';
import { Gender } from '../dom/profile/Gender';

@Component({
  selector: 'app-calculator',
  templateUrl: './calculator.page.html',
  styleUrls: ['./calculator.page.scss'],
})
export class CalculatorPage implements OnInit {
  smartPoints: number | string = '-';
  
  ...
/* eslint-disable no-underscore-dangle */
import { Component, OnInit } from '@angular/core';
...

<p><strong>Some Enums:</strong></p>
<pre><code>export enum Gender {
  m = 'Man',
  f = 'Vrouw',
}
export enum SubSize {
  none = '--',
  oneEight = '1/8',
  oneFourth = '1/4',
  oneThird = '1/3',
  threeEight = '3/8',
  half = '1/2',
  fiveEight = '5/8',
  twoThird = '2/3',
  threeForth = '3/4',
  sevenEight = '7/8',
}

I seem to be at a dead-end with this problem. Any help would be greatly appreciated.

Answer №1

Correct usage can be seen in the ProfilePage.

eGender = Gender

You've correctly identified your type on other faulty components.

eGender: Gender

eSubSize: SubSize

The reason for the undefined error is that you did not assign a value to the variables.

Instead of using :, you should use =.

eGender = Gender

eSubSize = SubSize

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

How can I access a DOM element in an AngularJS 2 TypeScript file?

As a newcomer to AngularJS, I am attempting to add a spinner as a background to all images on my website. Since there are multiple images, using a single variable like isLoaded in the TypeScript file is not feasible. Here is how I am implementing it in th ...

Create an object that may have any number of keys, but must have at least one key defined

Is there a way to accomplish this task? type Plant = "rose" | 'tulip' | 'daisy' type PlantCollection = { [p in Plant]?: number } const validPlantCollection: PlantCollection = { rose: 1, daisy: 2 } const emptyCollectionShouldBeRejec ...

Do not generate authentication code in JHipster using the --skip-server flag

Is there a reason why the authentication part is lost when generating a project with '--skip-server'? yo jhipster --skip-server It seems that upon generating the project without the server, the authentication gets affected (on AJS/A2). Is thi ...

Tips for assigning a value to a Reactive Form control within Angular 6

I am looking to dynamically set the value of a text box when clicking on a button that is located outside of the form. How can I achieve this? <form [formGroup]='student' (ngSubmit)='click()'> <input type='text' form ...

Stop automatic scrolling when the keyboard is visible in Angular

I have created a survey form where the user's name appears on top in mobile view. However, I am facing an issue with auto scroll when the keyboard pops up. I want to disable this feature to improve the user experience. <input (click)="onFocusI ...

Problem arises with connecting data in the relationship between a parent and child

Hi there, I am new to Angular 6 and currently encountering an issue with data binding. I have set up a test project with a parent-child relationship for data binding in the heading, but unfortunately, it's not working as expected. Can anyone lend me a ...

Is there a method to initiate a 'simple' action when dispatching an action in ngrx?

Here's the scenario I'm facing: When any of the actions listed below are dispatched, I need to update the saving property in the reducer to true. However, currently, I am not handling these actions in the reducer; instead, I handle them in my ef ...

POST requests in Angular Universal are making use of the IP address assigned to my server

My Angular Universal application (version 5.2.11) is currently hosted on Heroku, running on a Node server using express. I have implemented rate-limiters in all my POST routes to restrict requests by IP address, checking the request's IP through req.h ...

What could be the reason it's not functioning as expected? Maybe something to do with T extending a Record with symbols mapped

type Check<S extends Record<unique, unknown>> = S; type Output = Check<{ b: number; }>; By defining S extends Record<unique, unknown>, the Check function only accepts objects with unique keys. So why does Check<{b:number}> ...

Enhancing Angular with Plotly: Implementing click events on bar chart legends

I'm currently working on implementing color pickers for my plotly-plot charts within an Angular template. I am looking to add a function that triggers when the chart legend is clicked. How can I achieve this and get a click event for the chart legends ...

Best practices for implementing "Event Sourcing" in the NestJS CQRS recipe

I've been exploring the best practices for implementing "Event Sourcing" with the NestJS CQRS recipe (https://docs.nestjs.com/recipes/cqrs). After spending time delving into the features of NestJS, I have found it to be a fantastic framework overall. ...

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...

Filter through the array of objects using the title key

I'm attempting to extract specific data by filtering the 'page_title' key. Below is a snippet of my JSON object: { "page_components": [ { "page_title": "My Account", "row_block": [ { "heading": "", "sub_headi ...

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

Is there a method to programmatically halt the execution of npm run build in Next.js when a specific Error occurs within the getStaticProps function? Simply throwing an Error does not seem to stop the build process. ...

Troubleshooting Problem with Kendo UI Integration in Angular 2

Attempting to follow the steps outlined in http://www.telerik.com/kendo-angular-ui/getting-started/ Encountered this error message in the browser console. No errors found on the server side. <button kendoButton (click)="onButtonClick()" [ERROR ->][ ...

Open the accordion by clicking on a row

I'm currently seeking a solution for the ng-accordion feature in ng-bootstrap. Is it possible to expand/collapse the accordion by clicking anywhere on the row, not just the label? <ngb-accordion #acc="ngbAccordion" activeIds="ngb-pa ...

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

My Angular 4 application runs perfectly in various browsers. However, when trying to launch it in Internet Explorer version 11, I encounter the following two errors: SCRIPT1014: Invalid character addScript.js (9,1) SCRIPT1002: Syntax error main.bundle.js ...

What is preventing me from utilizing the import syntax to bring in a coffeescript file within typescript?

So here's the deal: I've got a typescript file where I'm importing various other typescript files like this: import ThingAMajig from '../../../libs/stuffs/ThingAMajig'; // a typescript file However, when it comes to importing my ...

Efficiently managing repeated records in NodeJS using loops

I am trying to retrieve sales records for specific products from a table in my database based on client ID. This is how I attempted to achieve it: public async getData(clientID: any): Promise<any> { try { return await client .scan( ...

Tips on maintaining continuous ng serve to keep Angular 2 application running indefinitely

I am running an Angular 2 application using the command ng serve --host ip address. Once executed, it starts at the default port and displays the following logs: Hash: ddb0ab205ea65648a918 Version: webpack 2.1.0-beta.25 Time: 17516ms Asset ...