Ion-input not available inside custom component

Ionic Framework ionic-v3
1

I’ve created a custom component using cli command

ionic generate component my-component

Everything works fine, the only problem I’m facing is I am unable to render ion input directives like ion-input, ion-radio etc inside my custom component

I’ve called my component inside a page like this

<my-compo></my-compo>

This is html of my component


<ion-label fixed>Title</ion-label>
<ion-input  type="text" value=""></ion-input>

ion-label shows up just fine, but ion-input doesn’t render at all.
Any guess?

2

Do matters improve if you wrap your component’s template inside an <ion-item>?

3

Its already wrapped inside ion-item


<ion-list>
      <ion-item text-wrap *ngFor="let html of survey.structure">      			
        <my-compo></my-compo>
      </ion-item>
</ion-list>
4

@casperkotwal Try to change your code to include item-content in your custom component:

<ion-list>
      <ion-item text-wrap *ngFor="let html of survey.structure">      			
        <my-compo item-content></my-compo>
      </ion-item>
</ion-list>

Or include the ion-item inside your custom component:

<ion-item text-wrap> 
	<ion-label fixed>Title</ion-label>
	<ion-input type="text" value=""></ion-input>
</ion-item>

and use it like:

<ion-list>
      <my-compo *ngFor="let html of survey.structure"></my-compo>
</ion-list>

More info here:

1 Like
5

Cool!! It works now :slight_smile: