When I use ion-select directive as a shared component in template of the main component, it will not be shown on the main component's template. It'll show as blank on the screen

Ionic Framework ionic-v3
1

When I use ion-select directive as a shared component in template of the main component, it will not be shown on the main component’s template. It’ll show as blank on the screen. But other directives like ion-button will be shown well normally on the screen. I think it a bug in Ionic 3. Am I right?

[home.html]

<ion-list>
    <ion-item>
      <ion-label>
        Gender
      </ion-label>
      <select-test></select-test>
   </ion-item>
 </ion-list>

[home.module.ts]

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ComponentsModule } from '../../components/components.module';
import { HomePage } from './home';

@NgModule({
  declarations: [
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule
  ],
})
export class HomePageModule {}

[select-test.html]

<ion-select>
  <ion-option value="f">Female</ion-option>
  <ion-option value="m">Male</ion-option>
</ion-select>

[component.module.ts]

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { SelectTestComponent } from './select-test/select-test';
@NgModule({
	declarations: [
    SelectTestComponent
  ],
	imports: [
    IonicModule
  ],
	exports: [
    SelectTestComponent
  ]
})
export class ComponentsModule {}

[dependencies]
“@angular/animations”: “5.2.9”,
“@angular/common”: “5.2.9”,
“@angular/compiler”: “5.2.9”,
“@angular/compiler-cli”: “5.2.9”,
“@angular/core”: “5.2.9”,
“@angular/forms”: “5.2.9”,
“@angular/http”: “5.2.9”,
“@angular/platform-browser”: “5.2.9”,
“@angular/platform-browser-dynamic”: “5.2.9”,
“@ionic-native/core”: “4.6.0”,
“ionic-angular”: “3.9.2”,
“@ionic/app-scripts”: “3.1.8”,

2

In your component.module.ts you need to add this.

imports: [
  IonicModule
]
3

I updated my question. I already imported IonicModule in the component.modules.ts. As my question, only ion-select directive will not shown on the screen. But other directive like ion-button will be shown well on the screen.

4

Did you see the ion-select with inspector?
You may need to add some css.

5

I’ve just made this project cleanly by ‘ionic start blank’ command to verify it again. I attach the screenshot of inspector.

image
image.png2088×988 307 KB

6

Sorry don’t understand what are you try to do?
Where is your component with ion-select?

7

I just needed one shared component which include only ion-select to use in the ion-item of some main components. When I made and tried to use it in the main component, I found out it is shown as blank in the main component. Again I made a clean project to verify if it’s really a bug, its result was same as my real project. So I am asking it’s a bug or not.

image
image.png584×948 47 KB

8

There is no bug.
I use ion-select in my custom component and its work like a charm.
As i say before you may need to add some css to you custom component.
First step for you is to check if ion-select exist in DOM with inspector.