Can't bind to 'ngForOf' since it isn't a known property of 'ion-item' in Ionic / Angular 9

Question

When trying to populate simple radio group list with phone numbers

Can't bind to 'ngForOf' since it isn't a known property of 'ion-item'.

Issue is related to Angular 9. Possible solutions says that BrowserModule and Common module needs to be in place. Think I got that. Yet, error is still there.

Ionic info:

   Ionic CLI                     : 5.4.13 
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.901.4
   @angular-devkit/schematics    : 9.1.4
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.2.0

Capacitor:
   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Cordova:
   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 6 other plugins)

Utility:
   cordova-res (update available: 0.15.0) : 0.6.0
   native-run (update available: 1.0.0)   : 0.2.8

add-number.page.ts

import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { ModalController, ToastController, IonRadioGroup } from '@ionic/angular';
import { FirebaseAuthService } from 'src/app/services/auth/user/auth_user.service';
import { PlayerDetailsModel } from '../../../../models';
import { FirebasePlayerService } from '../../../../services/firebase/players/firebase-players.service';


@Component({
  selector: 'app-add-number',
  templateUrl: './add-number.page.html',
  styleUrls: [
    './styles/add-number.modal.scss',
    './styles/add-number.shell.scss',
  ],
})
export class AddNumberPage implements OnInit {
  @Input() isModalRequired = false;
  @ViewChild('radioGroup') radioGroup: IonRadioGroup;

  public availableNumbers: string[] = [];
  // radioForm: FormGroup;
  //Get value on ionSelect on IonRadio item
  selected_number: any;

  constructor(
    private _modalController: ModalController,
    private _toastController: ToastController,
    private _playerService: FirebasePlayerService,
    private _authService: FirebaseAuthService
  ) {

  }

  radioGroupChange(event) {
    console.log("radioGroupChange", event.detail);
  }

  radioSelect(event) {
    console.log("radioSelect",event.detail);
    this.selected_number = event.detail;
  }


  public dismissModal() {
    this._modalController.dismiss();
  }

  private initalizeForm() {}

  ngOnInit() {
    this.availableNumbers.push("+16673039999")
    this.availableNumbers.push("+16673039998")
    this.availableNumbers.push("+16673039997")
  this.availableNumbers.push("+16673039996")

  console.log(this.availableNumbers)
  // this.selected_number = this.availableNumbers[0];

   }

}

add-number.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { AddNumberPageRoutingModule } from './add-number-routing.module';
import { AddNumberPage } from './add-number.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    AddNumberPageRoutingModule
  ],
  declarations: [AddNumberPage]
})
export class AddNumberPageModule {}

add-number.page.html

 <ion-content class="update-user-content">
    <section class="user-details-fields fields-section">

      <ion-list>

        <ion-radio-group  name="radio-group" allow-empty-selection="true" (ionChange)="radioGroupChange($event)"  #radioGroup>
          <ion-list-header>
            <ion-label>Pick your TomLine phone number</ion-label>
          </ion-list-header>

          <ion-item *ngFor="let number of availableNumbers" (ionSelect)="radioSelect($event)">
            <ion-label>{{number}}</ion-label>
            <ion-radio slot="start"  value="{{number}}" ></ion-radio>
          </ion-item>

        </ion-radio-group>
      </ion-list>

    </section>
  </ion-content>

Any idea how to fix this?

.

Edit: https://pastebin.com/pVbFa6X3 app.module.ts

Answer 1

I had the same problem. I assume that AddNumberPage is being leveraged as a modal somewhere in your app, but I cannot see where. Since you have placed this Modal within its own module, you have to import that module within the module from where where ever your Modal is created from.

Answer 2

Add the page to app-routingmodule.ts .