'ion-option' is not a known element

Question

I'm dabbling in Ionic for the first time, learning from the beginning using the components documentation, and I got stuck with this error: Template parse errors: 'ion-option' is not a known element:

When using a select component in this way:

<ion-select [(ngModel)]="gaming">
 <ion-option value="nes">NES</ion-option>
</ion-select>

I have searched and found solutions like this: Ionic button showing 'ion-button' is not a known element however, using something like <option ion-option value="nes">NES</option> doesn't work. Even, I include the schemas: [CUSTOM_ELEMENTS_SCHEMA] line in my module, but no options are showed. I'm using:

ionic (Ionic CLI) : 4.5.0 
Ionic Framework   : @ionic/angular 4.0.0-beta.16

I'll be grateful if someone can help me.

score 20 · Accepted Answer · answered Dec 05 '18 at 07:37

20

<ion-item>
  <ion-label>Hair Color</ion-label>
  <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
    <ion-select-option value="brown">Brown</ion-select-option>
    <ion-select-option value="blonde">Blonde</ion-select-option>
    <ion-select-option value="black">Black</ion-select-option>
    <ion-select-option value="red">Red</ion-select-option>
  </ion-select>
</ion-item>

ionic 4 has changed its syntax.

answered Dec 05 '18 at 07:37

Yushin

1,684
3
20
36

thanks, yesterday I realized there were another documentation page for beta version, however, I must say it is not so visible, it was hard to find it. I think I'll go back to version 3. – Freddy Martinez Dec 05 '18 at 20:14
1

you better stick to v3 until v4 is in alpha. tried to switch but its just for trail purposes. – Yushin Dec 06 '18 at 09:41

score 3 · Answer 2 · answered Jan 06 '19 at 18:22

I used below code and got it working. Ionic 4

 <ion-item>
      <ion-select value="brown" ok-text="Okay" cancel-text="Dismiss">
      <ion-select-option value="brown">Brown</ion-select-option>
      <ion-select-option value="blonde">Blonde</ion-select-option>
      <ion-select-option value="black">Black</ion-select-option>
      <ion-select-option value="red">Red</ion-select-option>
    </ion-select>
</ion-item>

score 3 · Answer 3 · answered Aug 08 '19 at 07:39

3

Use 'ion-option' instead of 'ion-select-option'.

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="this.gender">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

It works for me as expected. Thank You

answered Aug 08 '19 at 07:39

Vishal Chavan

334
3
3

I am using an older version of Ionic/Angular. This worked for me. – kodybrown Feb 11 '21 at 21:52

score -1 · Answer 4 · answered Dec 05 '18 at 02:41

Remember to use as the documentation suggest, if you're new just follow the examples.

<ion-item>
  <ion-label>Gender</ion-label>
  <ion-select [(ngModel)]="gender">
    <ion-option value="f">Female</ion-option>
    <ion-option value="m">Male</ion-option>
  </ion-select>
</ion-item>

Also if you need modify or a complex behavior, the Api Docs is your best ally.

API Select Ionic

https://ionicframework.com/docs/api/components/select/Select/

'ion-option' is not a known element

4 Answers4