# Ionic 2 modals breaking in a tabs layout

**URL:** <https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634>\
**Category:** ionic-v3\
**Created:** [January 7, 2016, 3:55am UTC](https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634 "2016-01-07T03:55:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![swarajd](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@swarajd](https://forum.ionicframework.com/u/swarajd)\
**Post date:** [January 7, 2016, 3:55am UTC](https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634/1 "2016-01-07T03:55:51Z")

</div>

My application is hosted in a tab style format, with the app.html being as such:

```
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Progress"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Workouts"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Create"></ion-tab>
</ion-tabs>

```

the page I am most concerned about is page 3, which is the creation tab. The code for the “controller” is as such:

```
import {Page, Modal, NavController} from 'ionic/ionic';
import {WorkoutService} from './../../services/workoutService';
import {ExerciseModal} from './exercise/exerciseModal';

@Page({
  templateUrl: 'build/pages/page3/page3.html',
  providers: [WorkoutService]
})
export class Page3 {

  constructor(workoutStore: WorkoutService, nav: NavController) {
    ...
    this.nav = nav;
  }

  addExercise() {
    ...
    let modal = Modal.create(ExerciseModal);
    this.nav.present(modal);
  }
}

```

The error I am receiving is as such:

[![](https://i.gyazo.com/1c6ddf0746535d6068b3bbc0d280db5e.png) ](https://i.gyazo.com/1c6ddf0746535d6068b3bbc0d280db5e.png)

Is there any reason as to why this is happening? I am not sure where rootNav is declared or why getActive is not a function of it. If anyone knows why this is happening please let me know.

Thanks.

---

<div class="post-metadata">

**Author:** ![swarajd](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@swarajd](https://forum.ionicframework.com/u/swarajd)\
**Post date:** [January 7, 2016, 5:59pm UTC](https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634/2 "2016-01-07T17:59:05Z")

</div>

bumping for visibility!

---

<div class="post-metadata">

**Author:** ![jet2686](https://avatars.discourse-cdn.com/v4/letter/j/e9bcb4/32.png) [@jet2686](https://forum.ionicframework.com/u/jet2686)\
**Post date:** [January 8, 2016, 3:58am UTC](https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634/3 "2016-01-08T03:58:22Z")

</div>

There is an issue in the starter for tabs. It does not have a ion-nav element: [https://github.com/driftyco/ionic2/issues/877](https://github.com/driftyco/ionic2/issues/877)

> **[ionic-team/ionic2-starter-tabs](https://github.com/ionic-team/ionic2-starter-tabs)**
>
> ionic2-starter-tabs - A starting project for Ionic using a simple tabbed interface

It was fixed for the js version, however it looks like you are using the typescript version (which you can find under branches). However the Pull Request was not accepted yet.

Essentailly you want to make another page for the tabs pull out the html thats in app.html into there and make a controller that imports your pages.

Then in app.html add \<ion-nav id=“nav” [root]=“root” #content\> and in app.ts import the TabPage and set it as root.

---

<div class="post-metadata">

**Author:** ![swarajd](https://avatars.discourse-cdn.com/v4/letter/s/e19adc/32.png) [@swarajd](https://forum.ionicframework.com/u/swarajd)\
**Post date:** [January 8, 2016, 3:54pm UTC](https://forum.ionicframework.com/t/ionic-2-modals-breaking-in-a-tabs-layout/40634/4 "2016-01-08T15:54:44Z")

</div>

Thank you for your help! I will try that!