Ionic 2/ Angular 2 => Use ionic 2 html tags inside angular 2 component

Question

I want to split a Ionic2 Page into smaller components. In addition I have created Angular2 Components which I insert in the Ionic2 Page. See Code. If I now use Ionic2 HTML tags in the Angular2 Componentes I get the

No value accessor for '' "

error for my <ion-textarea> tag.

Ionic Page:

@Page({
  selector: 'game',
  directives: [QuestionComponent, AnswerComponent],
  templateUrl: 'build/pages/quiz/quiz.page.html',
  styles: [`

   `], 
)}
...

Ionic Page HTML:

<ion-navbar *navbar>
<ion-title>Game: {{game.id}} -> Round {{round}}</ion-title>

<!-- Question Card -->
<question></question>

<!-- Answer Card -->
<answer></answer>

Angular2 Component:

import {Component}      from 'angular2/core'
import {Answer}             from "../../../models/answer";
import {AnswerService}      from "../../../services/answer.service";

@Component({
    selector: 'answer',
    providers: [AnswerService],
    templateUrl: 'build/pages/quiz/answer/answer.page.html',
    styles: [`

     `],
})
...

Angular Component HTML:

<ion-card>
<ion-card-content>
    <ion-item>
        <ion-label floating>Answer</ion-label>
        <ion-textarea [(ngModel)]="answerText">></ion-textarea>
        <button outline item-right (click)="submitAnswer(answerText)">
            Send
            <ion-icon name="send"></ion-icon>
        </button>
    </ion-item>
</ion-card-content>
</ion-card>

Is it possible to use Ionic2 tag components in a Angular2 Component? Or what is the best way to divided an Ionic 2 page into small components?

*EDIT

Solution

I have found a solution which solves my problem. Link to solution => Using ion-input inside custom component

To solve it you have to insert the Ionic 2 Directive in the Angular2 Komponetne .

Fix Angular Component:

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

import {Answer}             from "../../../models/answer";
import {AnswerService}      from "../../../services/answer.service";

@Component({
    selector: 'answer',
    directives: [IONIC_DIRECTIVES],
    providers: [AnswerService],
    templateUrl: 'build/pages/quiz/answer/answer.page.html',
    styles: [`

     `],
})

Possible duplicate of Using ion-input inside custom component — Günter Zöchbauer

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2016-03-11T10:34:40

I don't know Ionic but this works for Polymer elements and might work here as well - add ngDefaultControl:

<ion-textarea [(ngModel)]="answerText" ngDefaultControl></ion-textarea>

otherwise you'd probably need to implement a custom ControlValueAccessor like mentioned in https://github.com/angular/angular/issues/6639#issuecomment-174703547

See also ngModel: No value accessor for ''

Ionic 2/ Angular 2 => Use ionic 2 html tags inside angular 2 component

2 Answers