Using ion input inside a custom component

Question

I am trying to create a custom component in angular2 / ionic2 that contains 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 (without applying styles, don't even click on it). If I translate the code as it is in the main view, then it works. When adding buttons to this custom component, for example

 <button>ok</button> 

and import the button (and add it to the list of directives of this component too) this works. So I'm not sure if anything special should be done on the ItemInput component that will be used in the custom component, or if I just find an error.

Use of ionic 2.0 alpha49.

Any clues?

Answer 1

Import ion directives using 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 he answered, otherwise look Create custom components in Ionic2

Answer 3

For people who get this error:

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

In Ion 3, the declaration of the directive has changed. The component does not include the directive; the module associates ionic directives with the component. Use this instead in your IonicPageModule.forChild(MyComponent) module:

 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 an answer digging here: https://github.com/ionic-team/ionic/blob/master/src/module.ts

Hope this helps, cheers!