CODEWITHSUNDEEP
ionic-framework
Freddy Martinez
Freddy Martinez

Reputation: 103

'ion-option' is not a known element

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.

Upvotes: 10

Views: 17168

Answers (4)

Vishal Chavan
Vishal Chavan

Reputation: 404

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

Upvotes: 3

Sarad Vishwakama
Sarad Vishwakama

Reputation: 125

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>

Upvotes: 3

Yushin
Yushin

Reputation: 1750

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

Upvotes: 21

Yoarthur
Yoarthur

Reputation: 917

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/

Upvotes: -1

Related Questions