# Use page as both modal and page

**URL:** <https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090>\
**Category:** ionic-v3\
**Created:** [May 12, 2017, 9:27pm UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090 "2017-05-12T21:27:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![payt1400](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@payt1400](https://forum.ionicframework.com/u/payt1400)\
**Post date:** [May 12, 2017, 9:27pm UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/1 "2017-05-12T21:27:12Z")

</div>

I have a tab layout with a map tab and a tab with boats and I wanna be able to use the map as a page and also use the map as a modal from the boat page I know its possible but is it gonna give me some problems?

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 13, 2017, 1:21am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/2 "2017-05-13T01:21:59Z")

</div>

You can use like a did a mix of both for example, to create sub tabs you can use:

- on the crontoller Segments see docs about segments
- on the view, use \*ngSwitch to switch between them

(i’m using Ionic 2).

---

<div class="post-metadata">

**Author:** ![jsanta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jsanta/32/66466_2.png) [@jsanta](https://forum.ionicframework.com/u/jsanta)\
**Post date:** [May 13, 2017, 3:03am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/3 "2017-05-13T03:03:26Z")

</div>

Why as a page and not as a component? My guess is that a custom component would be a better option for your needs.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 13, 2017, 4:25am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/4 "2017-05-13T04:25:21Z")

</div>

@jsanta Simply because on several use cases, you might not want users to go to another children sub sub page.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 13, 2017, 4:37am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/5 "2017-05-13T04:37:20Z")

</div>

> [@FrancoisIonic](#):
>
> Ionic 2

“Ionic 2” is not an actual thing. I would appreciate it if people would stop using this phrase, as it perpetuates further confusion over the (admittedly confusing in the first place) versioning of Ionic’s various parts.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 13, 2017, 4:39am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/6 "2017-05-13T04:39:13Z")

</div>

@rapropos sorry to say I use it, mainly to diff and explain people it’s not V1 code, to be clearer.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 13, 2017, 4:41am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/7 "2017-05-13T04:41:10Z")

</div>

@rapropos but we talked about that topic once, i promice i won’t use V2 any more sorry.

---

<div class="post-metadata">

**Author:** ![jsanta](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jsanta/32/66466_2.png) [@jsanta](https://forum.ionicframework.com/u/jsanta)\
**Post date:** [May 13, 2017, 5:11am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/8 "2017-05-13T05:11:47Z")

</div>

But is that @payt1400 use case?  
Perhaps a component is enough to solve pay’s problem.

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 13, 2017, 5:18am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/9 "2017-05-13T05:18:27Z")

</div>

@jsanta Because he needs child of a tab, I suggested some ideas on top of the topic.

---

<div class="post-metadata">

**Author:** ![payt1400](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@payt1400](https://forum.ionicframework.com/u/payt1400)\
**Post date:** [May 13, 2017, 5:20am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/10 "2017-05-13T05:20:00Z")

</div>

I ended up using the map page as a modal and made it use a ngif for the view. I was thinking about a component but I was mostly wondering if this solution would give me any problem and should seperate pages and modals.

---

<div class="post-metadata">

**Author:** ![payt1400](https://avatars.discourse-cdn.com/v4/letter/p/c68b51/32.png) [@payt1400](https://forum.ionicframework.com/u/payt1400)\
**Post date:** [May 13, 2017, 5:25am UTC](https://forum.ionicframework.com/t/use-page-as-both-modal-and-page/90090/11 "2017-05-13T05:25:22Z")

</div>

I want to have it as a modal because in my boat tab I have a list of coordinates and want to show the particularly position on the map without leaving the page. But i also need a map that shows all positions in a seperate page.
