Display responsive input field based on selected option in ionic2 dropdown menu

When the user selects 'Other' from the dropdown menu using Ionic2 and Angular2, I want to provide them with an option to enter their profession.

Here is a visual representation of the select box:

https://i.sstatic.net/CRjAl.png

Below is the code snippet for achieving this functionality:

<ion-item>
<ion-label>Select Profession</ion-label>
<ion-select [(ngModel)]="userType">
<ion-option *ngFor="let ut of userTypeList" [value]="ut.value" [innerHTML]="ut.label"></ion-option>
</ion-select>
</ion-item>

typescriptangularionic2

Answer №1

To display an input based on the selected user type, you can utilize the userType property:

<ion-item>
  <ion-label>Select User Type</ion-label>
  <ion-select [(ngModel)]="userType">
    <ion-option *ngFor="let ut of userTypeList" [value]="ut.value" [innerHTML]="ut.label"></ion-option>
  </ion-select>
</ion-item>

<ion-item *ngIf="userType == 'otherOptionValue'">
  <ion-label>Other Details</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

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

Using the slice pipe on the data for a child component property is resulting in endless calls to the @Input set method

After incorporating a slice pipe into the data object below and passing that data to the child component's @Input method, there appears to be an endless loop of calls to that method. However, eliminating the slice pipe from the data object resolves th ...

angulartypescriptinputslice

tips for obtaining the highest value among multiple keys within an array

How can I find the maximum value among multiple keys in an array? I previously attempted to find the maximum values for just three keys. getMaxValuefromkeys(values: any[], key1: string, key2: string, key3: string) { var val1 = Math.max.apply(Math, v ...

javascriptangularjsarraysangulartypescript

Is there a way to determine if a string is empty, even if it contains hard returns?

I am currently working on a function that checks if a string is empty or not, but it seems to be missing the detection of new lines. export const isStrEmpty = function(text: string): boolean { return !text || text.match(/^ *$/) !== null; }; I attempted ...

javascripttypescript

Submitting a POST request from a Typescript Angular 2 application to a C# MVC backend

Having trouble passing a payload using Typescript service in an http.post request Here is my TypeScript code: saveEdits(body: Object): Observable<Animal[]> { let bodyString = JSON.stringify(body); let headers = new Headers({ 'Content- ...

c#angularjstypescript

What is the best way to fully reload an Angular component when the route is changed?

I'm looking for a way to reload or refresh a sidebar component when the route changes. Below is the code I currently have: constructor( private auth: AuthService, private router: Router, private changeDetector: ChangeDetectorRef ) { ...

angulartypescriptangular7

Steps to revert table data back to its original state after editing in Angular 12 template-driven form

Currently, I have implemented a feature in my web application where users can edit table data by clicking on an edit hyperlink. Once clicked, cancel and submit buttons appear to either discard or save the changes made. The issue I'm facing is related ...

htmlangulartypescriptangular2-template

Utilizing numerical values in useParams - A beginner's guide

Trying to access specific data from my json file using an ID, like "http://localhost:3001/pokemons/3", leads to a 404 error. All the data is visible at http://localhost:3001/pokemons. It seems that useParams doesn't want me to use id as a number - q ...

reactjstypescriptreact-router-dom

Assessing functionality in Angular8 by testing a function that accesses an array from a service

I have a function that I want to test along with the current test setup: canShowIt() { let showit = false; const profils = this.requestsService.userProfil; showit = profils.some((profil) => profil.id === this.profileDetail.id); return showit; ...

angularjasminekarma-jasminekarma-runner

Mistakes that occur while trying to expand a base class to implement CRUD functionality

Creating a base class in TypeScript for a node.js application to be extended by all entities/objects for CRUD operations is my current challenge. The base class implementation looks like this: export class Base { Model: any; constructor(modelName ...

node.jstypescript

Issue with detecting window resize event in Angular 7 service

I have a unique service that utilizes a ReplaySubject variable for components, but strangely the WindowResize event isn't triggering. import { Injectable, HostListener } from '@angular/core'; import { ReplaySubject } from 'rxjs'; ...

angulartypescript

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

javascripttypescriptdebuggingcompiler-errorstsc

Unable to associate with 'ngIf' as it is not recognized as a valid attribute for 'table'

I've attempted multiple solutions suggested here but none seem to be working. Can someone please assist me? My component.ts is functioning correctly and fetching values without any errors in the console, however, nothing is appearing on the HTML page ...

angularentity-framework

Using the "Range" Input Type in Angular's Reactive Forms

I'm having difficulties with styling the background of my slider/range in reactive forms within Angular. The input value updates correctly, but the issue arises when I try to type in the input field - the range changes, but the color (green) remains s ...

angularangular-reactive-formsangular-forms

The return type in Typescript is populated with a generic type name that lacks meaningful

When utilizing ts-results-es, I encounter an issue. This library aids in wrapping errors within a class to provide insight into potential function errors. Here is a simplified class definition: interface BaseResult<T, E> {} class Err<E> imple ...

typescripttypescript-generics

Transitioning menus in Ionic 2

I followed the instructions in the Ionic 2 menu documentation and tried to display the menu in a specific way: https://i.sstatic.net/zzm8f.png My intention was to have the menu displayed below the content page while keeping the menu button visible. Howe ...

javascriptnode.jstypescriptmenuionic2

Modify the System.config() in Angular 2 following the segregation of JavaScript and TypeScript files

My project follows the folder structure of quick-start ToH, which can be found at https://angular.io/docs/ts/latest/tutorial/toh-pt1.html In order to separate the .ts and .js files, I included the following line in the tsconfig.json file: "outDir": "dist" ...

angular

Steps for creating sha512 in Ionic 2 with Angular 2

I am looking to integrate the PayUbizz payment gateway into the Ionic2 framework. As part of this integration, I need to create a hash code using product details. For example: sha512(C0Dr8m|12345|10|Shopping|Test|<a href="/cdn-cgi/l/email-protection" ...

angularionic2

What is the best way to free up memory after receiving responseText in a continuous streaming request?

Utilizing xmlHTTPRequest to fetch data from a continuous motion JPEG data stream involves an interesting trick where responseText can populate data even before the request is completed, since it will never actually finish. However, I have encountered some ...

javascriptajaxangularasynchronousobservable

Tips for Sending Request Parameters to Angular Application

My Angular app, created with Angular CLI, is hosted on Heroku using express. The setup looks like this: const express = require('express'); const app = express(); // Serve the static files in the dist directory app.use(express.static(__dirname + ...

javascriptangularexpress

Encountering a critical issue with Angular 12: FATAL ERROR - The mark-compacts are not working effectively near the heap limit, leading to an allocation failure due

After upgrading my Angular application from version 8 to 12, I encountered an issue. Previously, when I ran ng serve, the application would start the server without any errors. However, after updating to v12, I started receiving an error when I attempted t ...

javascriptangularangular-cli