import { Component } from '@angular/core';
    import { Data } from '../../providers/data';
    import { NewListPage } from '../new-list/new-list';
    import { NavController } from 'ionic-angular';

    @Component({
      selector: 'page-page1',
      templateUrl: 'page1.html',

    })

    export class Page1 {
      public list: any[] = [];

      constructor(public navCtrl: NavController, private _data: Data) {
        console.log('Page1BEFORE');

        let that = this;
        this._data.list.subscribe((data) => {that.list.push(data);}, (err) => {console.error(err);});
     }
      newList() {
          console.log('NEWLIST1');
        this.navCtrl.push(NewListPage);
      }

    }

<ion-app>
<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Page One</ion-title>
    <ion-buttons end>
      <ion-icon ios="ios-contact" md="md-contact"></ion-icon>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content class="grid-basic-page">
 <ion-col width-100><progress class="progressBar" max="100" value="80"></progress></ion-col>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-row>
    <ion-col width-50><div>col</div></ion-col>
    <ion-col width-50><div>col</div></ion-col>
  </ion-row>
  <ion-list *ngIf="list">
    <ion-item *ngFor="let item of list">
      <ion-label>{{item.title}}</ion-label>
    </ion-item>
  </ion-list>
  <p *ngIf="!list"> No Lists </p>
  <button fab fab-bottom fab-right (click)="newList()"> New </button>
</ion-content>
</ion-app>

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';
import { Data } from '../providers/data';

@Component({
  templateUrl: 'app.html',
  providers: [Data],
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = Page1;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {
  console.log('PreAPP');
    this.initializeApp();
  console.log('PostApp');

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Page One', component: Page1 },
      { title: 'Page Two', component: Page2 }
    ];
    console.log('pages');

  }

  initializeApp() {
  console.log('APP');
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    console.log('OpenPAGE');

    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }
}

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{ p.title }}
      </button>
    </ion-list>
  </ion-content>

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>