*ngFor in Ionic Popover/Modal not working

Question

This code works any where within my pages except for Popover and Modal. I get Can't bind to 'ngForOf' since it isn't a known property of 'div'

Is there any work around to this?

<div *ngFor="let u of users">
  <ion-row>
    <ion-col size="12">
      <ion-label>
        <ion-title>{{ u.first}}</ion-title>
      </ion-label>
    </ion-col>
  </ion-row>
</div>

users: any[] = [
  {
    id: 1,
    first: 'Alice',
    last: 'Smith',
  },
  {
    id: 2,
    first: 'Bob',
    last: 'Davis',
  },
  {
    id: 3,
    first: 'Charlie',
    last: 'Rosenburg',
  }
];

You need to import CommonModule in the module where you have your .html — surendra kumar, Jul 09 '20 at 04:18
it will be good if you separate your pop/modal component, and add it to app.modul and call it wherever you want, I have a working example on stackblizt here => https://stackblitz.com/edit/ionic-v4-angular-modal-vxttcw?file=src%2Fapp%2Fapp.module.ts — Nicho, Jul 09 '20 at 05:26
I Just came across the same issue. Browser Module nor Common Module works. — Vaaljan, Sep 25 '20 at 11:00

score 2 · Answer 1 · answered Dec 15 '20 at 17:54

I have found the answer in this link, Where you should add the Modal component in the root app module: First import the Modal page in your app.module,

import {ModalPage} from "./home/modal.page"

then declares it inside declarations and entryComponents

declarations: [AppComponent,ModalPage],

entryComponents: [ModalPage],

*ngFor in Ionic Popover/Modal not working

1 Answers1