diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 99a0ab794d..cade1be291 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -53,6 +53,36 @@ modalController.dismiss({ }) ``` +### Lazy Loading + +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. + +For example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`: + +```typescript +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { IonicModule } from '@ionic/angular'; + +import { CalendarComponent } from './calendar.component'; +import { EventModalModule } from '../modals/event/event.module'; + +@NgModule({ + declarations: [ + CalendarComponent + ], + imports: [ + IonicModule, + CommonModule, + EventModalModule + ], + exports: [ + CalendarComponent + ] +}) + +export class CalendarComponentModule {} +```