Issue with ion-select and ion-option

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 -

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.


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

    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) {


    getCountries() {

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

            this.countries = resp.json();

        }, (err) => {





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


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

		<div padding-top></div>

		<p ion-text text-center>Register With Your Phone Number</p>
			<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.code}}</ion-option>
			<ion-input item-end type="text" [(ngModel)]="account.number" name="number"></ion-input>

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

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


I think i fixed it


			<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.code}}</ion-option>
			<ion-input item-end type="text" [(ngModel)]="account.number" name="number"></ion-input>

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.


Anyone having this issue should track this here
There may be a working workaround inside.

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

<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.

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>

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

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

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>

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