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?

Raphael · Accepted Answer · 2016-08-26 08:13:44Z

7

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

edited Aug 26, 2016 at 8:13

answered Jan 18, 2016 at 9:38

Raphael

1,70814 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anders Metnik Over a year ago

I get this error when trying that... (release version) [ts] Module '"c:/.../node_modules/ionic-angular/index"' has no exported member 'IONIC_DIRECTIVES'.

Jsmith · Accepted Answer · 2016-01-27 10:32:03Z

1

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

answered Jan 27, 2016 at 10:32

Jsmith

112 bronze badges

1 Comment

Anders Metnik Over a year ago

dead link, please fix

Ghis · Accepted Answer · 2017-11-12 19:40:24Z

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 !

Collectives™ on Stack Overflow

Using ion-input inside custom component

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related