Using ion-input inside custom component

Question

I'm trying to create a custom component in angular2/ionic2 which contains an input, here is the code:

import {Component} from "angular2/core";
import {ItemInput} from "ionic-framework/ionic";


@Component({
    directives: [ItemInput],
    selector: "add-input",
    template: `
    <ion-input clearInput>
      <input type="text" value="">
    </ion-input>
  `
})
export class AddInput {
    constructor() { }
}

The problem is that the ion-input seems to be ignored in the final page/view (no styles applied, can't even click on it). If I move the code as is to the main view, then it works. When adding to this custom component a button like

<button>ok</button> 

and importing Button (and adding it to the directives list of this component too) this works. So I'm not sure if something special has to be done abot the ItemInput component to be used in a custom component, or if I'm just hitting a bug.

Using ionic 2.0 alpha49.

Any clues?

Answer 1

Import ionic directives with IONIC_DIRECTIVES:

import {Component} from '@angular/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
    selector: 'add-input',
    template: `
    <ion-input clearInput>
      <input type="text" value="">
    </ion-input>
    `,
    directives: [IONIC_DIRECTIVES]
})

export class AddInput {
  constructor() {}
}

Answer 2

Hope its answered, otherwise have a look at Creating Custom Components in Ionic2

Answer 3

For people who get this error :

../node_modules/ionic-angular/index"' has no exported member 'IONIC_DIRECTIVES'

In Ionic 3, the directive declaration has changed. The component doesn't include the directive, the module binds the ionic directives to the component. Use this instead in your module IonicPageModule.forChild(MyComponent):

import { IonicModule; IonicPageModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { MyComponent } from '../directives/my-directive/my-directive';

@NgModule({
  imports: [
    IonicModule.forRoot(MyApp),
    IonicPageModule.forChild(MyComponent) // Here
  ],
  declarations: [MyApp, MyComponent]
})

Found the answer digging here : https://github.com/ionic-team/ionic/blob/master/src/module.ts

Hope this helps, cheers !