i am building a mobile app with ionic 5, when I try to call ion-modal that has an *ng-If in it, i would get this error

Can't bind to 'ngIf' since it isn't a known property of 'ion-header'.

The modal is a ment section in ment.page.ts, here is the code for the ment.page.html

<ion-header class="ion-no-border" *ngIf="!isLoading">
    <ion-toolbar>
        <ion-title class="centerAM">{{no_m | shortNumber}} ment{{no_m>1?'s':''}}</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
....

here is the code for the ment.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular'; 
import { CommonModule } from '@angular/mon';
import { FormsModule } from '@angular/forms';
import { NgxEmojModule } from 'ngx-emoj';

import { CommentPageRoutingModule } from './ment-routing.module';
import { CommentPage } from './ment.page';
import { PipesModule } from '../../pipes/pipes.module';
 
@NgModule({
    imports: [
        CommonModule,
        NgxEmojModule,
        PipesModule,
        FormsModule,
        IonicModule,
        CommentPageRoutingModule
    ],
    schemas: [],
    declarations: [ CommentPage]    
})
export class CommentPageModule {}

here is the function that calls the modal from the home.page.ts

async CommentModal(i, id) {
    const modal = await this.modalCtrl.create({
        ponent: CommentPage,
        ponentProps:{id},
        swipeToClose: true,
        cssClass: 'ment-modal'
    });
    await modal.present();
    return 
}

If i should add the ment.module.ts in the home.module.ts or the app.module.ts, when the page loads, it will automatically load the modal without the user clicking anything, and i also removed the page from the route and it didn't work, please what am i doing wrong

i am building a mobile app with ionic 5, when I try to call ion-modal that has an *ng-If in it, i would get this error

Can't bind to 'ngIf' since it isn't a known property of 'ion-header'.

The modal is a ment section in ment.page.ts, here is the code for the ment.page.html

<ion-header class="ion-no-border" *ngIf="!isLoading">
    <ion-toolbar>
        <ion-title class="centerAM">{{no_m | shortNumber}} ment{{no_m>1?'s':''}}</ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>
....

here is the code for the ment.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular'; 
import { CommonModule } from '@angular/mon';
import { FormsModule } from '@angular/forms';
import { NgxEmojModule } from 'ngx-emoj';

import { CommentPageRoutingModule } from './ment-routing.module';
import { CommentPage } from './ment.page';
import { PipesModule } from '../../pipes/pipes.module';
 
@NgModule({
    imports: [
        CommonModule,
        NgxEmojModule,
        PipesModule,
        FormsModule,
        IonicModule,
        CommentPageRoutingModule
    ],
    schemas: [],
    declarations: [ CommentPage]    
})
export class CommentPageModule {}

here is the function that calls the modal from the home.page.ts

async CommentModal(i, id) {
    const modal = await this.modalCtrl.create({
        ponent: CommentPage,
        ponentProps:{id},
        swipeToClose: true,
        cssClass: 'ment-modal'
    });
    await modal.present();
    return 
}

If i should add the ment.module.ts in the home.module.ts or the app.module.ts, when the page loads, it will automatically load the modal without the user clicking anything, and i also removed the page from the route and it didn't work, please what am i doing wrong

• javascript
• angular
• ionic-framework

4 Answers 4

It is likely that your modules are being lazy-loaded. In that case the docs suggest that you should import your modal module (CommentPageModule) inside of the module, where you require this modal.

In other words, you need:

...
@NgModule({
    imports: [
      ...
      CommentPageModule, // <--- here
    ]
...
export class YourMainModule {}

Otherwise, the modal ponent doesn't get fully loaded.

Quote from the docs:

When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded.

I got the same issue on angular 10, Ionic 5, and the issue resolved by just import

modal page in app.modual.ts like

import { ModalPage } from './modules/core/modal/modal/modal.page';



@NgModule({
  declarations: [
   ...
    ModalPage
  ]

just add the ponent which will be used

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        UpdatePageRoutingModule],
    declarations: [UpdatePage, DownloadModalComponent],
    entryComponents: [DownloadModalComponent]
})
export class UpdatePageModule {}

in modal in your module declarations and entryComponents like this

where DownloadModalComponent is a ponent which is being used in a modal of UpdatePage.

You need to make sure that you've imported the BrowserModule to your module.

import {BrowserModule} from '@angular/platform-browser'; 
....
@NgModule({
    imports: [
      BrowserModule,
    ]
....