NG0303: Can't bind to 'ngModel' since it isn't a known property of 'ion-range'

Question

i'm started a few day ago with Ionic with angular project. I had a problem when i serve my project. this is the error: NG0303: Can't bind to 'ngModel' since it isn't a known property of 'ion-range'.

I want to use the brightness puglin with ion-range. Here my code.

app.module.ts

  import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Brightness } from '@ionic-native/brightness/ngx';



@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },Brightness],
  bootstrap: [AppComponent],
})
export class AppModule {}

I have folder commons with a few random components, and a randomer.module to manage them.

in the randomer.module.ts

    import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberRandomComponent } from './number-random/number-random.component';
import { ActionsheetComponent } from './actionsheet/actionsheet.component';
import { BrightnessComponent } from './brightness/brightness.component';
import { IonicModule } from '@ionic/angular';



@NgModule({
  declarations: [NumberRandomComponent,ActionsheetComponent,BrightnessComponent],
  imports: [
    CommonModule,IonicModule
  ],
  exports:[NumberRandomComponent,ActionsheetComponent,BrightnessComponent]
})
export class RandomerModule { }

and my brigthness.component.html

  <p>
  brightness works!
 
  Current brightness level is {{ brightnessModel }} / 1
</p>
<ion-item>
  
    <ion-range min="0" max="1" step="0.01" [(NgModel)]="brightnessModel" (ionChange)="adjustBrightness()" [value]="brightnessModel">
      <ion-icon size="small" slot="start" name="sunny"></ion-icon>
      <ion-icon slot="end" name="sunny"></ion-icon>
  </ion-range>
 
</ion-item>

brightness.component.ts:

import { Component, OnInit } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';

@Component({
  selector: 'app-brightness',
  templateUrl: './brightness.component.html',
  styleUrls: ['./brightness.component.scss'],
})
export class BrightnessComponent implements OnInit {

  public brightnessModel = 0.20;

  constructor(private brightness: Brightness,) {
    // Set brightness on app load
   this.brightness.setBrightness(this.brightnessModel);
  }

  adjustBrightness(){
    // Called method from range's ionChange event
    this.brightness.setBrightness(this.brightnessModel);
  }
  ngOnInit() { }

}

here i import my randomer.module. on tab1.module.ts:

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';

import { Tab1PageRoutingModule } from './tab1-routing.module';
import { RandomerModule } from '../commons/randomer.module';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ExploreContainerComponentModule,
    Tab1PageRoutingModule,
    RandomerModule
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

and in tabPage.html i have:

<app-brightness></app-brightness>

I don't understand how to solve the problem.

Answer 1

Make sure to import RandomerModule inside your app.module app.module.ts:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule,IonicModule.forRoot(), AppRoutingModule, RandomerModule], // <============== RandomerModule here.
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },Brightness],
  bootstrap: [AppComponent],
})
export class AppModule {}

FormsModule within your RandomerModule

randomer.module.ts:

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NumberRandomComponent } from './number-random/number-random.component';
import { ActionsheetComponent } from './actionsheet/actionsheet.component';
import { BrightnessComponent } from './brightness/brightness.component';
import { IonicModule } from '@ionic/angular';



@NgModule({
  declarations: [NumberRandomComponent,ActionsheetComponent,BrightnessComponent],
  imports: [
    CommonModule,IonicModule,FormsModule // <=== FormsModule here
  ],
  exports:[NumberRandomComponent,ActionsheetComponent,BrightnessComponent]
})
export class RandomerModule { }

And these setter/getter method to your brightness component.ts.

brightness.component.ts:

import { Component, OnInit } from '@angular/core';
import { Brightness } from '@ionic-native/brightness/ngx';

@Component({
  selector: 'app-brightness',
  templateUrl: './brightness.component.html',
  styleUrls: ['./brightness.component.scss'],
})
export class BrightnessComponent implements OnInit {

  
  private _brightnessModel = 0.20;  // <=== modified this
  public get brightnessModel() {    // <=== add this setter
      return this._brightnessModel;
  }

  public set brightnessModel(num: number) {  // <=== add this getter
      this._brightnessModel = num;
      this.brightness.setBrightness(num); 
  }

  constructor(private brightness: Brightness,) {
    // Set brightness on app load
   this.brightness.setBrightness(this.brightnessModel);
  }

  adjustBrightness(){
    // Called method from range's ionChange event
    // this.brightness.setBrightness(this.brightnessModel);
  }
  ngOnInit() { }

}

brightness.component.html:

Now remove the (ionChange)="adjustBrightness()" line