Adding tabs to a modal view


In my app, I have a page with a list of renters and when I click on a renter a modal view will be shown with the renter details. But I want to modify the modal view to have two tabs, one for the renter details and the other one for comments but when I try this I keep getting a black screen!!! Why???



import { Component } from ‘@angular/core’;
import { NavController, NavParams, ViewController } from ‘ionic-angular’;

import { RenterPage } from ‘…/renter/renter’;
import { CommentsPage } from ‘…/comments/comments’;

selector: ‘page-renter-tabs’,
templateUrl: ‘renter-tabs.html’,
export class RenterTabsPage {

renterPage = RenterPage;
commentsPage = CommentsPage;

constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController) {


ionViewDidLoad() {
console.log(‘ionViewDidLoad TabsPage’);




<ion-tabs tabsPlacement="bottom">
    <ion-tab [root]="renterPage" tabIcon="list-box" tabTitle="Renter" ></ion-tab>
    <ion-tab [root]="commentsPage" tabIcon="star" tabTitle="Comments"></ion-tab>