Conditionally displaying ion-option in Ionic 2 using *ngIf

My Ionic2 code involves the use of ion-select. Here is a snippet of my code:

       <ion-item>
            <ion-label>System Size:</ion-label>
            <ion-select [(ngModel)]="quoteDetailsUpdate.system_size" name="system">
                <ion-option value="1.5"> 1.5K </ion-option>
                <ion-option value="2"> 2K </ion-option>
                <ion-option value="3"> 3K </ion-option>
            </ion-select>
        </ion-item>

If the system size falls between 1.5 and 2, I aim for the selection of the option 1.5K. For instance, if the value is 1.75, it should automatically select the option 1.5K.

angulartypescriptionic2

Answer №1

Is it necessary for this change to only impact the view? If so, you have the option to utilize a different property within your component as demonstrated below:

public auxSystemSize: number;

...

constructor(...) {
    if(this.quoteDetailsUpdate.system_size > 1.5 && quoteDetailsUpdate.system_size < 2) {
        this.auxSystemSize = 1.5;
    } else {
        this.auxSystemSize = this.quoteDetailsUpdate.system_size;
    }
}

You can then use the auxSystemSize in the view like so:

<ion-item>
    <ion-label>System Size:</ion-label>
    <ion-select [(ngModel)]="auxSystemSize" name="system">
        <ion-option value="1.5"> 1.5K </ion-option>
        <ion-option value="2"> 2K </ion-option>
        <ion-option value="3"> 3K </ion-option>
    </ion-select>
</ion-item>

This approach ensures that the quoteDetailsUpdate.system_size property retains its original value. Keep in mind that when submitting the form, you may need to assign the value of auxSystemSize back to the model, if required.

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 Promises for Angular9 Modals

Looking for guidance on creating a modal in Angular 9 that utilizes a Promise for the result. Struggling to separate the promise logic from the declaration itself. <a class="button-primary" (click)="yes()">Yes</a> <a class="button-default" ...

javascriptangularpromise

How is it possible for this for loop to function properly without the need to pass the incrementing variable

I managed to compile my code and it's working fine, but there's something interesting - the variable that should reference the incrementing value is not included as an argument in the for loop. var _loop2 = function _loop2() { var p = docume ...

javascripttypescriptfor-loop

Guide to create a React component with passed-in properties

Currently in the process of transitioning a react project from redux to mobx, encountering an issue along the way. Previously, I utilized the container/presenter pattern with redux and the "connect" function: export default connect(mapStateToProps, mapDi ...

reactjstypescriptmobxmobx-react

Dealing with the Angular 7 ExpressionChangedAfterItHasBeenCheckedError in combination with NgsScrollReveal

Utilizing ngScrollReveal triggers a re-render with every scroll event. I am invoking a function through the HTML in this manner: <component [alternate]="toggleAlternate()"> The code for toggleAlternate() is as follows: toggleAlternate() { this.a ...

angulartypescript

Angular: Deciding Between Utilizing Boolean @Input and Attribute @Directive - What's the Best Approach?

My goal with Angular is to create a "directive" that can add functionality to my component, specifically adding a myPortlet with a close button when using the directive myHasCloseButton. <myPortlet myHasCloseButton>...</myPortlet> In explori ...

javascriptangulartypescriptangular-directiveangular-components

Issue with PrimeNg dropdown in a modifiable data table where the chosen value is not retained

Here is the code snippet for the column in the data table: <p-column field="organization.description" header="Partner" [editable]="dtCostShare" [style]="{'width':'30%'}"> ...

angularprimeng-datatableprimeng-dropdowns

Is it necessary to declare variables in the component's ts file if they are only used in the template in Angular 2

Here is an example where the input is hidden initially and becomes visible when the user clicks a button. The question arises whether the variable showInput should be declared in the component's typescript file. @Component({ selector: 'exampl ...

angular

Exploring the concept of object destructuring in Typescript with imports

Currently, I am in the process of developing the type system for @masala/parser. This allows me to customize the index.d.ts file to fit my needs. When using this as a user, I can: import masala from '@masala/parser' let {C, Stream, F} = masala; ...

typescripttypescript-typingstypescript2.0

What is the process for extracting the elements of an array fetched from a service in Angular 2?

Currently, I am learning Angular 2 + PrimeNG and going through a quick start project available at the following link: https://github.com/primefaces/primeng-quickstart The project is a CRUD application and it functions flawlessly. The data is neatly displa ...

angularjsangulartypescriptprimeng

Incorporating Sass into a TypeScript-enabled Create React App

Having recently transferred a create-react-app to typescript, I've encountered an issue where my scss files are not being recognized in the .tsx components. The way I'm importing them is as follows: import './styles/scss/style.scss'; ...

reactjstypescriptsasscreate-react-app

"Utilizing aws-sdk in a TSX file within a React project: a step-by

When working on a project using TypeScript (tsx) for React, I encountered an issue with uploading images to the server using aws-sdk to communicate with Amazon S3. To resolve this, I made sure to install aws-sdk via npm and typings. UploadFile.tsx import ...

reactjstypescriptamazon-s3aws-sdk

The property '.....' is missing an initializer and has not been explicitly assigned in the constructor

I want to address an issue with a similar question title that was asked 5 years ago on Stack Overflow. The problem is related to declaring a variable as an array of a specific object type in an Angular component using TypeScript 4.9. Even though I tried t ...

angulartypescript

Guide on retrieving an ArrayList() from intricate function in Angular

Simplicity is the key to my question. Let's take a look at this Angular method: getAllOrdersHeaders(){ this.getAllOrdersIds().subscribe(idList=>{ idList.forEach(id=>{ this.ordersCollection.doc(id).collection('metadata&apo ...

javascriptangulartypescript

How can I accurately determine the parameters of an ellipse that represents the trajectory of an object in space using initial condition values (r0, v0, deltat, and mu)?

In my current game project, I'm developing a primary user interface that displays the solar system from a top-down perspective (with Earth's north pole as 'up'). One of the challenges I faced was creating a semi-realistic path for an ob ...

typescriptvectorgame-physicsspace

Ensuring the header of the table is working properly and implementing a scrollable feature for the

Currently, I am facing a design issue in my Angular Project that I need help with. I am attempting to achieve a scrolling effect on the body of a table while keeping the header fixed. Although I have tried to implement this feature, I have been unsuccess ...

htmlcssangularhtml-table

Experiencing difficulties whilst attempting to run the Angular application

After integrating ngx Bootstrap into my Angular Application for the date picker functionality, I encountered an error while running the application. Below are the details of the error: ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ...

angularangular-bootstrapngx-bootstrapngx-bootstrap-modalangular-bootstrap-calendar

Navigating to the standalone URL for Angular 16 will consistently redirect users to the homepage

I am facing an issue with my Angular 16 app. It is a pure standalone application, without any ng modules. I have configured routes, and when using links within components (e.g.: routerLink="/team"), it successfully routes to the correct page and updates th ...

angularangular-standalone-components

Is React Context malfunctioning due to a syntax error?

Using the function "login" from React context is causing an error for me: const handleLogin = async (data: LoginType) => { try { await login(auth, data.email, data.password); router.push("/Dashboard"); } catch (error: an ...

reactjstypescriptnext.jsfirebase-authenticationreact-context

I am using Chart.js to add colors to every 7th vertical grid line on the x-axis, visually representing the start of each new week

Having some trouble with the function(context) in my Java code. When I use an array, everything works fine. However, when I try to convert it into a formula, it doesn't seem to be running. I'm new to Java, so I think it must be something simple t ...

angularchart.js

Alter the color of the text labels on the bar graph using the chartsjs-plugin-data-labels

The bar chart below shows the number of students. Here are the custom options for formatting it: public chartOptions = { responsive: true, maintainAspectRatio: false, legend: { display: true, labels: { fontColor: "bla ...

javascripthtmlcssangularchart.js