refactor(): wrap nav pages and modal page in <ion-page>

packages/demos/angular/package-lock.json

@@ -60,7 +60,7 @@
         "autoprefixer": "6.7.7",
         "chalk": "2.2.2",
         "circular-dependency-plugin": "3.0.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",
@@ -255,9 +255,9 @@
       }
     },
     "@ionic/angular": {
-      "version": "0.0.2-16",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-16.tgz",
-      "integrity": "sha512-9ZS3GgO8X9G/df/2Pi9vZPgNyDYvsn2ees10Mt2u84SJC5Gf1OhbkLGiPbwVsOAxQV1qOgGCl50TXaXErNZj+A==",
+      "version": "0.0.2-17",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-17.tgz",
+      "integrity": "sha512-o2w2l7Mc7CAsSdC/d268ODDqD0HQ+gxP9V0RTpcS+E0jBEXybOW5dG/a75fT7uccdxeiscTv3XkzsyQBCIJwYA==",
       "requires": {
         "@stencil/core": "0.1.1-0"
       },
@@ -281,9 +281,9 @@
       }
     },
     "@ionic/core": {
-      "version": "0.0.2-38",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-38.tgz",
-      "integrity": "sha512-tOP7WZ9V1WXYfYy96LJgUyutVtOerbnJDJccMv1wpAckVWPzsCxyM1jvdehRcsOdXjhq2+HeByIZS3f8B4okqQ=="
+      "version": "0.0.2-41",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-41.tgz",
+      "integrity": "sha512-7mBe4RbrvD+LDL5HaEsWe5p2WDM4xf4vE+cMHNzPmqFN6lx60c3XkA1twVXZBjfcarYTCqne3SvbbHGfOrkS9w=="
     },
     "@ngtools/json-schema": {
       "version": "1.1.0",
@@ -1466,9 +1466,9 @@
       "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
     },
     "common-tags": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.6.0.tgz",
-      "integrity": "sha512-sgmgEodNLbxnSSoR5a2xH23CoDJ9J5MKsJS/tqplfmJLpikG0oWMpAb+tM8ERQCMpp9I+ERf6SYl158G6GwX0w==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.0.tgz",
+      "integrity": "sha512-A63PFbYd8ccyVZbqZkWjQ9+BqSaROt/BCNesdhZZNjvUXx1U59fA+XDeaIJWqrgPsoIdmYds1qofDNDvrffw9Q==",
       "dev": true,
       "requires": {
         "babel-runtime": "6.26.0"

packages/demos/angular/src/app/modal/modal-page-to-present.ts

@@ -1,26 +1,30 @@
 import { Component } from '@angular/core';
+import { ModalController } from '@ionic/angular';
 
 @Component({
   selector: 'page-one',
   template: `
-<ion-header>
+<ion-page>
+  <ion-header>
     <ion-toolbar>
       <ion-title>Page One</ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content>
+  </ion-header>
+  <ion-content>
     Page One
     <ul>
       <li>ngOnInit - {{ngOnInitDetection}}</li>
     </ul>
-</ion-content>
+    <ion-button (click)="dismiss()">Close Modal</ion-button>
+  </ion-content>
+</ion-page>
   `
 })
 export class ModalPageToPresent {
 
   ngOnInitDetection = 'initial';
 
-  constructor() {
+  constructor(private modalController: ModalController) {
 
   }
 
@@ -32,4 +36,7 @@ export class ModalPageToPresent {
     }, 500);
   }
 
+  dismiss() {
+    this.modalController.dismiss();
+  }
 }

packages/demos/angular/src/app/nav/pages/page-one.ts

@@ -5,12 +5,13 @@ import { PageTwo } from './page-two';
 @Component({
   selector: 'page-one',
   template: `
-<ion-header>
+<ion-page>
+  <ion-header>
     <ion-toolbar>
       <ion-title>Page One</ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content>
+  </ion-header>
+  <ion-content>
     Page One
     <div>
       <ion-button (click)="goToPageTwo()">Go to Page Two</ion-button>
@@ -20,7 +21,8 @@ import { PageTwo } from './page-two';
       <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
       <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
     </ul>
-</ion-content>
+  </ion-content>
+</ion-page>
   `
 })
 export class PageOne {

packages/demos/angular/src/app/nav/pages/page-three.ts

@@ -3,22 +3,24 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'page-three',
   template: `
-<ion-header>
+<ion-page>
+  <ion-header>
     <ion-toolbar>
       <ion-title>Page Three</ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content>
+  </ion-header>
+  <ion-content>
     Page Three
     <div>
     <ion-button (click)="goBack()">Go Back</ion-button>
-</div>
+  </div>
     <ul>
       <li>ngOnInit - {{ngOnInitDetection}}</li>
       <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
       <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
     </ul>
-</ion-content>
+  </ion-content>
+</ion-page>
   `
 })
 export class PageThree {

packages/demos/angular/src/app/nav/pages/page-two.ts

@@ -5,25 +5,27 @@ import { PageThree } from './page-three';
 @Component({
   selector: 'page-two',
   template: `
-<ion-header>
+<ion-page>
+  <ion-header>
     <ion-toolbar>
       <ion-title>Page Two</ion-title>
     </ion-toolbar>
-</ion-header>
-<ion-content>
+  </ion-header>
+  <ion-content>
     Page Two
     <div>
       <ion-button (click)="goNext()">Go to Page Three</ion-button>
     </div>
     <div>
     <ion-button (click)="goBack()">Go Back</ion-button>
-</div>
+  </div>
     <ul>
       <li>ngOnInit - {{ngOnInitDetection}}</li>
       <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
       <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
     </ul>
-</ion-content>
+  </ion-content>
+</ion-page>
   `
 })
 export class PageTwo {