From 12fd207ecdab52e52b6d0edda901b976383a310b Mon Sep 17 00:00:00 2001 From: Wilson Hobbs Date: Thu, 24 Aug 2017 21:59:03 -0400 Subject: [PATCH] docs(modal): add docs to use nav in modal (#8151) I added documentation on how to use a modal container component in an Ionic app. This has had a lot of discussion in #8151, and is minimally documented, so I took a stab at documenting it. --- src/components/modal/modal-controller.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/modal/modal-controller.ts b/src/components/modal/modal-controller.ts index d0471890253..ef12892f5c7 100644 --- a/src/components/modal/modal-controller.ts +++ b/src/components/modal/modal-controller.ts @@ -112,6 +112,25 @@ import { DeepLinker } from '../../navigation/deep-linker'; * * } * ``` + * + * A common issue is that a developer may try to implement navigation in a modal, but when you try NavController.push(), + * you will notice that the status bar on iOS gets cut off. The proper way to implement navigation in a modal is to + * make the modal component a navigation container, and set the root page to the page you want to show in your modal. + * + * ```ts + * @Component({ + * template: '' + * }) + * export class MyModalWrapper { + * rootPage = 'MyModalContentPage'; // This is the page you want your modal to display + * rootParams; + * + * constructor(navParams: NavParams, private viewCtrl: ViewController) { + * this.rootParams = Object.assign({}, navParams.data, {viewCtrl: viewCtrl}); + * // This line will send the view controller into your child views, so you can dismiss the modals from there. + * } + * } + * ``` * @demo /docs/demos/src/modal/ * @see {@link /docs/components#modals Modal Component Docs} */