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() {}
}