CODEWITHSUNDEEP
angulartypescriptionic2
Akash M
Akash M

Reputation: 509

*ngIf in ion-option in ionic 2

I am using ion-select in ionic2. Below is 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>

I want if the system size is between 1.5 and 2 then it should get selected the value 1.5K. Such if the value is 1.75 then it should get select the option 1.5K.

Upvotes: 0

Views: 1192

Answers (1)

sebaferreras
sebaferreras

Reputation: 44669

Should this change only affect the view? If that's the case, you can use a different property from your component like this:

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;
    }
}

And then use that auxSystemSize in the view

<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 way the quoteDetailsUpdate.system_size property will keep its original value. Please notice that when submitting the form, you'll need to assign the value of the auxSystemSize back to the model (if you need to).

Upvotes: 1

Related Questions