I am having a difficulty in binding ngModel to ion-segment while building an ionic application. Below is the heading of the error I have received :
Can't bind to 'ngModel' since it isn't a known property of 'ion-segment'
I intend to use Shared Module for two modules. One more shared module I have created using standard HTML tags and it worked as required. But this one seems to be causing error.
I tried many solutions suggested by other users in similar kind of problems but none of them seem to solve the problem. Here is my shared Module I am using:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { CommonModule } from '@angular/common';
import { SomeClass } from './some-class';
@NgModule({
imports : [
CommonModule,
IonicPageModule.forChild(SomeClass),
],
declarations : [SomeClass],
exports : [SomeClass]
})
export class SharedModule{
}
The HTML file for the same is :
<ion-segment [(ngModel)]="XXX" (click)="someMethod()">
<ion-segment-button value="A"> A </ion-segment-button>
<ion-segment-button value="B"> B </ion-segment-button>
<ion-segment-button value="C"> C </ion-segment-button>
</ion-segment>
Note : This is only a part of HTML file to be included in a whole other page.
The Component file :
import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'some-class',
templateUrl: 'some-class.html'
})
export class SomeClass {
XXX: String;
constructor(public navCtrl: NavController) { }
}
Any ideas where I am going wrong and what should I do to solve the problem?
Note: I have tried importing FormsModule and ReactiveFormsModule and also tried exporting the references, but nothing helped.