My [(ngModel)] is not working in the custom component in Ionic 4

Question

I am working in my Ionic 4 project and I have created a custom component but in that custom component my [(ngModel)] is not working.

This is my custom-header-component.component.html:

<ion-select [(ngModel)]="languageSelected" (ionChange)='setLanguage()' ngDefaultControl>
    <ion-select-option value="en">English</ion-select-option>
    <ion-select-option value="ar">Arabic</ion-select-option>
</ion-select>

In this html my [(ngModel)] is not working because it is not printing any value in the console.

This is my custom-header-component.component.ts:

languageSelected: any;
setLanguage() {
let me=this;
console.log('languageSelected',me.languageSelected);
}

In this ts file, it is not printing any value.

Maybe the problem is that, I have not included the FormsModule.

This is my Folder:

custom-header-component:
|
-- custom-header-component.component.html
-- custom-header-component.component.scss
-- custom-header-component.component.spec.ts
-- custom-header-component.component.ts

components.module.ts

This is my components.module.ts:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CustomHeaderComponentComponent } from './custom-header-component/custom-header-component.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    declarations: [CustomHeaderComponentComponent],
    exports: [CustomHeaderComponentComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [
     FormsModule,
     ReactiveFormsModule
    ],
})
export class ComponentsModule{}

Any help is much appreciated.

Answer 1

you just need to import FormsModule in app.module.ts

import { FormsModule } from '@angular/forms';

and add ComponentPage inside declarations and entryComponents

You can see the example below

In app.module.ts

import { FormsModule } from '@angular/forms';

import { ComponentPage } from './component/component.page'


@NgModule({
  declarations: [
  ComponentPage,
 ],
entryComponents: [
   ComponentPage,
  ],
  imports: [FormsModule],

})