Loop through an enum in ion-select

How can I use ngModel to iterate through an enum with ion-select?

export enum EducationLevel {
    ILLITERATE = "Illiterate",
    1_TO_3_YEARS = "1 to 3 years",
    4_TO_7_YEARS = "4 to 7 years",
    MORE_THAN_8_YEARS = "more than 8 years"
}

class Person {
    ...
    public education: typeof EducationLevel = EducationLevel;
}

export class RegistrationPage {
    ...
    this.person = new Person();
}

home.html
<ion-select interface="popover" [(ngModel)]="person.education">
<ion-select-option *ngFor="let edu of person.education">       
    {{edu}}
</ion-select-option>
</ion-select>

I want to display list items in ion-select-option and save the selected item to "this.person"

Answer №1

If you need to loop through values in an enum, you can create a custom function to extract those values easily.

function getEnumValues(enum) {
  const values = [];
  const keys = Object.keys(enum);
  
  for (let i = 0; i < keys.length; i++) {
    if (i % 2 !== 0) { // Only grab the odd-indexed elements which are the values
      values.push(keys[i]);
    }
  }
  
  return values;
}

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

The functionality of window.location.href seems to be malfunctioning on mobile devices within an ionic application

Attempting to open a view with a function call from the UI side <ion-option-button class="button-light icon ion-chatbubble" ng-click="openView('username')"></ion-option-button> The controller code for this action is as follows: $sc ...

Updating form fields within nested forms using the FormBuilder array

The recommended method to change nested values according to the API documentation is using patchValue. For example, myForm.patchValue({'key': {'subKey': 'newValue'}}); But what if we need to change values in a nested array, ...

Exploring Angular2: Understanding how to retrieve an object with an unknown key

I am trying to showcase a specific value from different objects within a template. The path of the desired value depends on the object being referenced. For example: let obj = { "a": "a", "b": { "1": "1", "2": "READ ME" } } let ...

Configuring global runtime variables in NextJS for server-side operations

Currently, I am utilizing the instrumentation.ts file in NextJS to retrieve configuration dynamically when the server starts up. My goal is to have this configuration accessible during runtime for all API routes and server-side components. What would be th ...

retrieve the element from a different array using AngularJS version 1

How can I fetch a value from another array? I am using Ionic with Angular 1. In Angular 1, I have created two arrays as shown below: $scope.customers = [{id:1111, name:"Milan Shop", city:"Milan"},{id:2222, name:"Roma Shop", city:"Roma"}] $scope.SizeOfCu ...

Angular 2 Typescript: Understanding the Structure of Member Properties and Constructors

I am currently exploring a project built with Ionic 2, Angular 2, and Typescript, and I find myself puzzled by the way member properties are being set. In the code snippet below, I noticed that Angular automatically injects dependencies into the construc ...

The metadata for [object Module] does not contain any ngModule information

I recently made changes to my routes by switching them from lazy loaded using a string reference to lazy loading through a call to import. However, I am facing an issue where every time I try to navigate to one of the pages, I encounter the following erro ...

Retrieving data from API using Ionic2 to http.post

Here is the code snippet I used to make an HTTP POST call: var creds = encodeURI("name="+name+"&email="+email); var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); headers.append(&apos ...

What could be causing the Angular 5 error: "Cannot find exported module 'OpaqueToken'."?

I am currently in the process of upgrading my Angular 4 application to Angular 5. During this upgrade, I encountered the following error message: ERROR in src/app/application/services/generated/variables.ts(1,10): error TS2305: Module '"..../no ...

Unable to transfer information from the Parent component to the Child component

Can you help me solve this strange issue? I am experiencing a problem where I am passing data from a parent component to a child component using a service method that returns data as Observable<DemoModel>. The issue is that when the child component ...

The variable "$" cannot be found within the current context - encountering TypeScript and jQuery within a module

Whenever I attempt to utilize jQuery within a class or module, I encounter an error: /// <reference path="../jquery.d.ts" /> element: jQuery; // all is good elementou: $; // all is fine class buggers{ private element: jQuery; // The nam ...

Using Angular to send all form data to the API endpoint

Please bear with me as I am new and may ask small or incorrect questions. <form > <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:< ...

Troubleshooting routing problems with Angular + Kubernetes + Nginx

In the current project I'm working on, I've been dealing with several routing issues which I believe stem from a configuration problem. I'm looking for anyone who has faced similar challenges to share their experiences. Project Overview: ...

Display a symbol retrieved from the backend server

After receiving a response from the backend server for my Angular 2/4 application, I am presented with an attribute called "connectionStatus". This attribute indicates the status of a database connection, either as "UP" or "DOWN". In order to display this ...

Update the content of a page on an Ionic application every few minutes

I am currently developing an application that requires the data displayed on the page to be refreshed automatically every 15 minutes, even if there is no user interaction happening at that time. What would be the most efficient method to accomplish this t ...

There was an unhandled rejection error stating: "TypeError - Unable to access property 'push' as it is undefined"

I am encountering an issue while trying to create a function that returns all indexes of an array. I'm not sure what mistake I might be making, as I keep getting an error stating that push cannot be used due to an undefined value. Here's the cod ...

Eliminate any repeated elements in the array by utilizing TypeScript

Hey, I'm trying to figure out how to remove duplicate entries from an array where the UserId values are the same, and keep only one of each unique entry. Can anyone help me with this? For example: a=[ {userId:1,name:''}, {userId:2,name:&apo ...

My Weaviate JavaScript client is not returning anything when I use the ".withAsk" function. What could be the issue?

I recently set up a Weaviate Cloud Cluster using the instructions from the quick start manual. The data has been imported successfully, and the client connection is functioning. For the ask function, I have implemented the following: export async functio ...

To reveal more options, simply click on the button to open up a dropdown

I am currently utilizing the Bootstrap 5 CDN and I am looking for a way to automatically open the dropdown menu without having to physically click on it. Within the navbar, I want to display the "Dropdown Link": <nav class="navbar navbar-expand-sm ...

The function angularCompiler.getNextProgram is not available in the context of angular 12 when using custom-webpack configurations

Recently, I upgraded my Angular 11 project to version 12. I have incorporated the @angular-builders/custom-webpack package in my devDependencies and I am using the below command for building my Angular project. ng build --configuration=production --build ...