refactor(): wrap templates in <ion-page>

packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html

@@ -30,6 +30,24 @@
     </ion-col>
   </ion-row>
 
+  <ion-row>
+    <ion-col>
+      <h2>Search Input</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Text Input</ion-label>
+        <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10"></ion-searchbar>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+        Value:
+        <span id="searchOutput">{{searchValue}}</span>
+    </ion-col>
+  </ion-row>
+
   <ion-row>
     <ion-col>
       <h2>Numeric Input</h2>
@@ -168,6 +186,25 @@
     <ion-col>
     </ion-col>
   </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Segment</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-segment [(ngModel)]="segmentValue" >
+        <ion-segment-button value="taco"></ion-segment-button>
+        <ion-segment-button value="burrito"></ion-segment-button>
+        <ion-segment-button value="enchilada"></ion-segment-button>
+      </ion-segment>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span >{{segmentValue}}</span>
+    </ion-col>
+  </ion-row>
 </ion-grid>
 
 <a href='home'>Home</a>

packages/demos/conference-app/angular/package-lock.json

@@ -68,7 +68,7 @@
         "autoprefixer": "6.7.7",
         "chalk": "2.2.2",
         "circular-dependency-plugin": "4.3.0",
-        "common-tags": "1.6.0",
+        "common-tags": "1.7.0",
         "copy-webpack-plugin": "4.3.1",
         "core-object": "3.1.5",
         "css-loader": "0.28.8",
@@ -284,17 +284,17 @@
       "integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
     },
     "@ionic/angular": {
-      "version": "0.0.2-16",
+      "version": "0.0.2-17",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-16.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-17.tgz",
-      "integrity": "sha512-9ZS3GgO8X9G/df/2Pi9vZPgNyDYvsn2ees10Mt2u84SJC5Gf1OhbkLGiPbwVsOAxQV1qOgGCl50TXaXErNZj+A==",
+      "integrity": "sha512-o2w2l7Mc7CAsSdC/d268ODDqD0HQ+gxP9V0RTpcS+E0jBEXybOW5dG/a75fT7uccdxeiscTv3XkzsyQBCIJwYA==",
       "requires": {
         "@stencil/core": "0.1.1-0"
       }
     },
     "@ionic/core": {
-      "version": "0.0.2-39",
+      "version": "0.0.2-41",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-39.tgz",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-41.tgz",
-      "integrity": "sha512-v+dOmZjV3HAn26cBITBl7LqZXV4XOdeFwZR0GrlR7VHiNgC6HBGBtlF2/yOlnHuU5KPzTZLSVbia9BwmytCt4g=="
+      "integrity": "sha512-7mBe4RbrvD+LDL5HaEsWe5p2WDM4xf4vE+cMHNzPmqFN6lx60c3XkA1twVXZBjfcarYTCqne3SvbbHGfOrkS9w=="
     },
     "@ionic/storage": {
       "version": "2.1.3",
@@ -1503,9 +1503,9 @@
       "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
     },
     "common-tags": {
-      "version": "1.6.0",
+      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.0.tgz",
-      "integrity": "sha512-sgmgEodNLbxnSSoR5a2xH23CoDJ9J5MKsJS/tqplfmJLpikG0oWMpAb+tM8ERQCMpp9I+ERf6SYl158G6GwX0w==",
+      "integrity": "sha512-A63PFbYd8ccyVZbqZkWjQ9+BqSaROt/BCNesdhZZNjvUXx1U59fA+XDeaIJWqrgPsoIdmYds1qofDNDvrffw9Q==",
       "dev": true,
       "requires": {
         "babel-runtime": "6.26.0"

packages/demos/conference-app/angular/src/app/app.component.html

@@ -22,7 +22,7 @@
         </ion-content>
     </ion-menu>
 
-    <ion-nav #nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav>
+    <ion-nav #nav #content swipeBackEnabled="false" main name="app"></ion-nav>
 
   </ion-split-pane>
 

packages/demos/conference-app/angular/src/app/app.component.ts

@@ -69,12 +69,15 @@ export class AppComponent implements OnInit {
     // Check if the user has already seen the tutorial
     this.storage.get('hasSeenTutorial')
       .then((hasSeenTutorial) => {
+        console.log('hasSeenTutorial: ', hasSeenTutorial);
         if (hasSeenTutorial) {
           this.rootPage = TabsPage;
         } else {
           this.rootPage = TutorialPage;
         }
-        // this.platformReady()
+        getNav(this.navRef).then((nav) => {
+          nav.setRoot(this.rootPage);
+        });
       });
 
     // load the conference data
@@ -121,7 +124,9 @@ export class AppComponent implements OnInit {
   }
 
   openTutorial() {
-    return getNav(this.navRef).setRoot(TutorialPage);
+    return getNav(this.navRef).then((navElement) => {
+      navElement.setRoot(TutorialPage);
+    });
   }
 
   listenToLoginEvents() {
@@ -163,8 +168,10 @@ export class AppComponent implements OnInit {
   }
 }
 
-function getNav(elementRef: ElementRef) {
+function getNav(elementRef: ElementRef): Promise<HTMLIonNavElement> {
+  return (elementRef.nativeElement as any).componentOnReady().then(() => {
     return elementRef.nativeElement as HTMLIonNavElement;
+  });
 }
 
 export interface PageInterface {

packages/demos/conference-app/angular/src/pages/about-popover/about-popover.ts

@@ -6,6 +6,7 @@ import { App } from '@ionic/angular';
 
 @Component({
   template: `
+  <ion-page>
     <ion-list>
       <ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')">
         <ion-label>Learn Ionic</ion-label>
@@ -23,6 +24,7 @@ import { App } from '@ionic/angular';
         <ion-label>Support</ion-label>
       </ion-item>
     </ion-list>
+  </ion-page>
   `
 })
 export class PopoverPage {

packages/demos/conference-app/angular/src/pages/about/about.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-button menuToggle> <!-- TODO menuToggle -->
@@ -50,3 +51,4 @@
       </p>
     </div>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/account/account.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -23,3 +24,4 @@
       </ion-list>
     </div>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/login/login.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -48,3 +49,4 @@
     </form>
 
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/map/map.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-button menuToggle>
@@ -10,3 +11,4 @@
   <ion-content class="map-page">
     <div #mapCanvas class="map-canvas"></div>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/schedule-filter/schedule-filter.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -34,3 +35,4 @@
     </ion-list>
 
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/schedule/schedule.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -33,6 +34,7 @@
     </ion-toolbar>
   </ion-header>
   <ion-content>
+    Segment value is: {{segment}}
     <ion-list #scheduleList [hidden]="shownSessions === 0">
         <div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called -->
           <ion-item-divider sticky>
@@ -62,3 +64,4 @@
         </div>
     </ion-list>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/session-detail/session-detail.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-title *ngIf="session">{{session.name}}</ion-title>
@@ -17,3 +18,4 @@
       <p>{{session.description}}</p>
     </div>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/signup/signup.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-buttons slot="start">
@@ -42,3 +43,4 @@
     </form>
 
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-title>{{speaker?.name}}</ion-title>
@@ -21,3 +22,4 @@
 
     <p>{{speaker?.about}}</p>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header>
     <ion-toolbar>
       <ion-button menuToggle>
@@ -64,3 +65,4 @@
       </ion-grid>
     </ion-list>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/support/support.html

@@ -1,5 +1,5 @@
+<ion-page>
   <ion-header>
-
     <ion-toolbar>
       <ion-buttons slot="start">
         <ion-button> <!-- TODO menuToggle -->
@@ -33,3 +33,4 @@
       </div>
     </form>
   </ion-content>
+</ion-page>

packages/demos/conference-app/angular/src/pages/tabs-page/tabs-page.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-tabs name="conference">
     <ion-tab title="Schedule" icon="calendar">
       <ion-nav [root]="tab1Root"></ion-nav>
@@ -12,3 +13,4 @@
       <ion-nav [root]="tab4Root"></ion-nav>
     </ion-tab>
   </ion-tabs>
+</ion-page>

packages/demos/conference-app/angular/src/pages/tutorial/tutorial.html

@@ -1,3 +1,4 @@
+<ion-page>
   <ion-header no-border>
     <ion-toolbar>
       <ion-buttons slot="end" end *ngIf="showSkip">
@@ -42,3 +43,4 @@
 
     </ion-slides>
   </ion-content>
+</ion-page>