From c87e26131a248b661d5018e6920a72f9465e1577 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 3 Apr 2019 12:44:00 -0400 Subject: [PATCH 1/2] docs(modal): add lazy loading usage --- core/src/components/modal/readme.md | 30 +++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) 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 {} +``` From 2f34f52536a4037a476f862a26f08ced3e5bbdb0 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 5 Apr 2019 12:32:52 -0400 Subject: [PATCH 2/2] move lazy loading to angular usage --- core/src/components/modal/readme.md | 62 +++++++++++----------- core/src/components/modal/usage/angular.md | 31 +++++++++++ 2 files changed, 62 insertions(+), 31 deletions(-) diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index cade1be291..84b029870c 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -53,37 +53,6 @@ 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 {} -``` - @@ -132,6 +101,37 @@ export class ModalExample { } ``` +#### 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 {} +``` + ### Javascript diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md index 9c64048f44..030ebda75c 100644 --- a/core/src/components/modal/usage/angular.md +++ b/core/src/components/modal/usage/angular.md @@ -38,3 +38,34 @@ export class ModalExample { } ``` + +#### 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 {} +``` \ No newline at end of file