Issue with ion-select and ion-option

Ionic Framework ionic-v3
1

Hi, i am having trouble with ion-select and ion-option

Problem: the ion-select should only show the code when it is selected and not the entire name and code. I tried to use [Selected Text] for this as shown in the api - https://ionicframework.com/docs/api/components/select/Select/

but i get an error saying “Can’t bind to ‘selectedText’ since it isn’t a known property of ‘ion-option’.”

i don’t know if what ive done is best practise so if theres anything else i can improve let me know.

signup.ts

import {Component} from '@angular/core';
import {NavController, ToastController} from 'ionic-angular';

import {MainPage} from '../../pages/pages';
import {VerifyPage} from '../verify/verify';

import {User} from '../../providers/user';
import {UtilProvider} from '../../providers/util';

import {TranslateService} from '@ngx-translate/core';


@Component({
    selector: 'page-signup',
    templateUrl: 'signup.html'
})
export class SignupPage {

    account: { countryCode: string, number: string } = {
        countryCode: '+44',
        number: '123456789',
    };

    // Our translated text strings
    private signupErrorString: string;

    countries: any;

    constructor(public navCtrl: NavController,
                public user: User,
                public toastCtrl: ToastController,
                public translateService: TranslateService,
                public util: UtilProvider) {

        this.getCountries();
    }

    getCountries() {

        this.util.getCountries().subscribe((resp) => {

            this.countries = resp.json();

        }, (err) => {

            console.log(err);
        });

    }
}

signup.html

<ion-header>

	<ion-navbar>
		<ion-title text-center="">{{ 'SIGNUP_TITLE' | translate }}</ion-title>
	</ion-navbar>

</ion-header>


<ion-content padding>
	<form (submit)="doSignup()">

		<div padding-top></div>

		<p ion-text text-center>Register With Your Phone Number</p>
		<ion-item>
			<ion-icon item-start name="phone-portrait"></ion-icon>
			<ion-select item-left [(ngModel)]="account.code" name="countrycode">
				<ion-option *ngFor="let country of countries" [value]="country.code" [selectedText]="country.code">{{country.name}} {{country.code}}</ion-option>
			</ion-select>
			<ion-input item-end type="text" [(ngModel)]="account.number" name="number"></ion-input>
		</ion-item>

		<div padding>
			<button ion-button color="primary" block>Send Confirmation Code</button>
		</div>

		<p ion-text text-center color="dark">We will send a one time SMS message to verify your phone number.</p>

	</form>
</ion-content>
2

I think i fixed it

signup.html

	<ion-item>
			<ion-icon item-start name="phone-portrait"></ion-icon>
			<ion-select item-left [(ngModel)]="account.code" name="countrycode" [selectedText]="account.code" [selectOptions]="{title:'Select Your Country'}">
				<ion-option *ngFor="let country of countries" [value]="country.code">{{country.name}} {{country.code}}</ion-option>
			</ion-select>
			<ion-input item-end type="text" [(ngModel)]="account.number" name="number"></ion-input>
	</ion-item>

we add [selectedText] to the ion-select not the ion-options. In the ion-select we dont have access to the country object, so we use account.code instead. This displays the selected ngmodel value which is the account code.

2 Likes
3

Anyone having this issue should track this here https://github.com/ionic-team/ionic/issues/8561
There may be a working workaround inside.

4

Error: Template parse errors:
Can’t bind to ‘selectedText’ since it isn’t a known property of ‘ion-option’.

1 Like
5

<ion-select [(ngModel)]=“employeelist” interface=“popover” multiple=“true” (ionChange)=“employees()” formControlName=“FormProjectEmployees”>
<ion-option *ngFor=“let employee of EmployeesList” value={{employee.fullname}} checked="{{employee.selected}}">{{employee.fullname}}

I have a similar problem with the code above. It says Can’t bind ‘Checked’ since it is not a known property to ‘ion-option’.

Please help me with this.

6

Thank you…

<ion-select [selectOptions]="{title:'<p>Login as</p>',cssClass: 'selectscss'}" [(ngModel)]="ppl.gndr" formControlName="ppl" class="input1">
              <ion-option value="1">Male</ion-option>
              <ion-option value="2">Female</ion-option>
            </ion-select>
          </ion-item>

In this above code of “selectscss” file is defined in app.scss file

7

Don’t declare both of these. Choose one or the other.

8

ok… I Have another issue, How to wrap the text conent in ion-option tag…
Am using .

<ion-select [selectOptions]="{title:'<p>Login as</p>',cssClass: 'selectscss'}" [(ngModel)]="ctgryDetails.ppl"  class="input1">
              <ion-option value="1"><span text-wrap>StudentPlacement OfficerPlacement OfficerPlacement Officer</span></ion-option>
            </ion-select>

Its not wrok. and am using scss
word-wrap: break-word;