chore(): move demos/angular to angular/test

2026-03-13 10:22:08 +08:00 · 2018-03-21 14:05:02 -05:00
parent 99610f7f08
commit 3829886a74
133 changed files with 0 additions and 4 deletions
--- a/angular/test/nav/.angular-cli.json
+++ b/angular/test/nav/.angular-cli.json
@@ -0,0 +1,61 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "demo"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico",
+        { "glob": "**/*", "input": "../node_modules/@ionic/core/dist", "output": "./ionic/core" }
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.scss"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json",
+      "exclude": "**/node_modules/**"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "scss",
+    "component": {}
+  }
+}
--- a/angular/test/nav/.editorconfig
+++ b/angular/test/nav/.editorconfig
@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/angular/test/nav/.gitignore
+++ b/angular/test/nav/.gitignore
@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
--- a/angular/test/nav/README.md
+++ b/angular/test/nav/README.md
@@ -0,0 +1,37 @@
+# Demo
+
+The purpose of this application is to provide an Angular CLI application where Ionic Core components can be tested in a simple manner. This application allows the developer to experiment with interactions between Angular and Ionic in an easy and safe manner.
+
+## Getting started
+
+**Note:** This application now uses the last published `@ionic/core` package. To test against changes that you have made locally to core use `npm link` (see below).
+
+To use _this_ application perform the following commands from this directory:
+
+- `npm i`
+- `npm start` - to serve the application
+- `npm test` - to run the unit tests
+- `npm run e2e` - to run the end to end tests
+- `npx ts-node server/server.ts` - run the server required by any page that does a test post
+
+See the `package.json` file for a complete list of scripts. The above are just the most common.
+
+## Running the Angular CLI
+
+This application installs the Angular CLI locally so you do not need to have it installed globally. You can use `npm` to run any of the `ng` commands. For example:
+
+- `npm run ng build -- --prod` - run a production build
+- `npm run ng g component my-cool-thing`
+
+## Testing Local Changes
+
+In order to test local changes they need to be copied into `node_modules` after the initial `npm i`
+
+1. In `core`, run `npm run build`
+1. In `demos/angular`, run `rm -rf node_modules/\@ionic/core/dist`
+1. In `demos/angular`, run `cp -R ../../core/dist node_modules/\@ionic/core/dist`
+
+Use a similar procedure if you want to test local changes to `@ionic/angular`
+
+**Note:** A couple of short scripts have been created to handle the copy bits. Just run `./cpang.sh` or `./cpcore.sh` from
+`demos/angular` after you have built `@ionic/angular` or `@ionic/core`.
--- a/angular/test/nav/e2e/action-sheet.e2e-spec.ts
+++ b/angular/test/nav/e2e/action-sheet.e2e-spec.ts
@@ -0,0 +1,34 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { ActionSheetPage } from './action-sheet.po';
+import { sleep } from './utils/helpers';
+
+describe('Action Sheet Page', () => {
+  let page: ActionSheetPage;
+
+  beforeEach(() => {
+    page = new ActionSheetPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the action sheet, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let actionSheet = await page.getActionSheet();
+    expect(await actionSheet.isPresent()).toBeTruthy();
+    const closeButton = await page.getActionSheetCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    actionSheet = null;
+    actionSheet = await page.getActionSheet();
+    expect(await actionSheet.isPresent()).toBeFalsy();
+    done();
+  });
+
+});
--- a/angular/test/nav/e2e/action-sheet.po.ts
+++ b/angular/test/nav/e2e/action-sheet.po.ts
@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class ActionSheetPage {
+  navigateTo() {
+    return browser.get('/actionSheet');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getActionSheet() {
+    return element(by.css('ion-action-sheet'));
+  }
+
+  getActionSheetCloseButton() {
+    return element(by.css('.action-sheet-cancel'));
+  }
+}
--- a/angular/test/nav/e2e/alert.e2e-spec.ts
+++ b/angular/test/nav/e2e/alert.e2e-spec.ts
@@ -0,0 +1,33 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { AlertPage } from './alert.po';
+import { sleep } from './utils/helpers';
+
+describe('Alert Page', () => {
+  let page: AlertPage;
+
+  beforeEach(() => {
+    page = new AlertPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the alert, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let alert = await page.getAlert();
+    expect(await alert.isPresent()).toBeTruthy();
+    const closeButton = await page.getCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    alert = null;
+    alert = await page.getAlert();
+    expect(await alert.isPresent()).toBeFalsy();
+    done();
+  });
+});
--- a/angular/test/nav/e2e/alert.po.ts
+++ b/angular/test/nav/e2e/alert.po.ts
@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class AlertPage {
+  navigateTo() {
+    return browser.get('/alert');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getAlert() {
+    return element(by.css('ion-alert'));
+  }
+
+  getCloseButton() {
+    return element(by.css('.alert-button'));
+  }
+}
--- a/angular/test/nav/e2e/basic-inputs.e2e-spec.ts
+++ b/angular/test/nav/e2e/basic-inputs.e2e-spec.ts
@@ -0,0 +1,183 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { BasicInputsPage } from './basic-inputs.po';
+
+describe('Basic Inputs Page', () => {
+  let page: BasicInputsPage;
+
+  beforeEach(() => {
+    page = new BasicInputsPage();
+  });
+
+  it('should display title', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Ionic Core Basic Inputs Demo');
+  });
+
+  describe('search input', () => {
+    it('should display the starting text', () => {
+      page.navigateTo();
+      const el = page.getIonicSearchInput();
+      expect(el.getAttribute('value')).toEqual(null);
+    });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicSearchInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getSearchOutput()).toEqual('I am new text');
+    });
+
+    // it('should disable', () => {
+    //   page.navigateTo();
+    //   const inp = page.getIonicSearchInputEditable();
+    //   const cb = page.getDisableButton();
+    //   cb.click();
+    //   expect(inp.isEnabled()).toEqual(false);
+    // });
+  });
+
+  describe('text input', () => {
+    it('should display the starting text', () => {
+      page.navigateTo();
+      const el = page.getIonicTextInput();
+      expect(el.getAttribute('value')).toEqual('This is the Text Input');
+    });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicTextInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getTextOutput()).toEqual('I am new text');
+    });
+
+    it('should trigger validation errors', () => {
+      page.navigateTo();
+      const el = page.getIonicTextInput();
+      const inp = page.getIonicTextInputEditable();
+      expect(hasClass(el, 'ng-invalid')).toEqual(false);
+      inp.clear();
+      inp.sendKeys('ninechars');
+      expect(hasClass(el, 'ng-invalid')).toEqual(true);
+      inp.sendKeys('X');
+      expect(hasClass(el, 'ng-invalid')).toEqual(false);
+    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicTextInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
+  });
+
+  describe('numeric input', () => {
+    it('should remain type number with modifications', () => {
+      page.navigateTo();
+      const el = page.getIonicNumericInput();
+      const inp = page.getIonicNumericInputEditable();
+      expect(page.getNumericOutputType()).toEqual('number');
+      inp.sendKeys('318');
+      expect(page.getNumericOutputType()).toEqual('number');
+      inp.clear();
+      inp.sendKeys('-0');
+      expect(page.getNumericOutputType()).toEqual('number');
+      inp.sendKeys('.48859');
+      expect(page.getNumericOutputType()).toEqual('number');
+    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicNumericInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
+  });
+
+  describe('textarea input', () => {
+    it('should display the starting text', () => {
+      page.navigateTo();
+      const el = page.getIonicTextareaInput();
+      expect(el.getAttribute('value')).toEqual('This is the Textarea Input');
+    });
+
+    it('should reflect back the entered data', () => {
+      page.navigateTo();
+      const el = page.getIonicTextareaInputEditable();
+      el.clear();
+      el.sendKeys('I am new text');
+      expect(page.getTextareaOutput()).toEqual('I am new text');
+    });
+
+    it('should trigger validation errors', () => {
+      page.navigateTo();
+      const el = page.getIonicTextareaInput();
+      const inp = page.getIonicTextareaInputEditable();
+      expect(hasClass(el, 'ng-invalid')).toEqual(false);
+      inp.clear();
+      inp.sendKeys('ninechars');
+      expect(hasClass(el, 'ng-invalid')).toEqual(true);
+      inp.sendKeys('X');
+      expect(hasClass(el, 'ng-invalid')).toEqual(false);
+    });
+
+    it('should disable', () => {
+      page.navigateTo();
+      const inp = page.getIonicTextareaInputEditable();
+      const cb = page.getDisableButton();
+      cb.click();
+      expect(inp.isEnabled()).toEqual(false);
+    });
+  });
+
+  describe('checkbox input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicCheckbox();
+      expect(el.getAttribute('checked')).toEqual('true');
+    });
+
+    it('should reflect toggling the value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const el = page.getIonicCheckbox();
+        el.click();
+        expect(page.getCheckboxOutput()).toEqual('false');
+      });
+    });
+  });
+
+  describe('toggle input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicToggle();
+      expect(el.getAttribute('checked')).toBeNull();
+    });
+
+    it('should reflect toggling the value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const el = page.getIonicToggle();
+        el.click();
+        expect(page.getToggleOutput()).toEqual('true');
+      });
+    });
+  });
+
+  describe('date time picker', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicDatetime();
+      expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
+    });
+  });
+
+  async function hasClass(el: ElementFinder, cls: string): Promise<boolean> {
+    const classes = await el.getAttribute('class');
+    return classes.split(' ').indexOf(cls) !== -1;
+  }
+});
--- a/angular/test/nav/e2e/basic-inputs.po.ts
+++ b/angular/test/nav/e2e/basic-inputs.po.ts
@@ -0,0 +1,91 @@
+import { browser, by, element } from 'protractor';
+
+export class BasicInputsPage {
+  navigateTo() {
+    return browser.get('/basic-inputs');
+  }
+
+  getIonicCheckbox() {
+    return element(by.id('ionCheckbox'));
+  }
+
+  getCheckboxOutput() {
+    return element(by.id('checkboxOutput')).getText();
+  }
+
+  getIonicDatetime() {
+    return element(by.id('ionDatetimeInput'));
+  }
+
+  getDatetimeOutput() {
+    return element(by.id('datetimeOutput')).getText();
+  }
+
+  getIonicToggle() {
+    return element(by.id('ionToggle'));
+  }
+
+  getToggleOutput() {
+    return element(by.id('toggleOutput')).getText();
+  }
+
+  getTitleText() {
+    return element(by.css('.title')).getText();
+  }
+
+  getIonicTextareaInput() {
+    return element(by.id('ionTextareaInput'));
+  }
+
+  getIonicTextareaInputEditable() {
+    const parent = this.getIonicTextareaInput();
+    return parent.all(by.css('textarea')).first();
+  }
+
+  getTextareaOutput() {
+    return element(by.id('textareaOutput')).getText();
+  }
+
+  getIonicSearchInput() {
+    return element(by.id('ionSearchInput'));
+  }
+
+  getIonicSearchInputEditable() {
+    const parent = this.getIonicSearchInput();
+    return parent.all(by.css('input')).first();
+  }
+
+  getSearchOutput() {
+    return element(by.id('searchOutput')).getText();
+  }
+
+  getIonicTextInput() {
+    return element(by.id('ionTextInput'));
+  }
+
+  getIonicTextInputEditable() {
+    const parent = this.getIonicTextInput();
+    return parent.all(by.css('input')).first();
+  }
+
+  getIonicNumericInput() {
+    return element(by.id('ionNumericInput'));
+  }
+
+  getIonicNumericInputEditable() {
+    const parent = this.getIonicNumericInput();
+    return parent.all(by.css('input')).first();
+  }
+
+  getTextOutput() {
+    return element(by.id('textOutput')).getText();
+  }
+
+  getNumericOutputType() {
+    return element(by.id('numericOutputType')).getText();
+  }
+
+  getDisableButton() {
+    return element(by.id('disableCheckbox'));
+  }
+}
--- a/angular/test/nav/e2e/group-inputs.e2e-spec.ts
+++ b/angular/test/nav/e2e/group-inputs.e2e-spec.ts
@@ -0,0 +1,111 @@
+import { browser, ElementFinder, promise } from 'protractor/built';
+
+import { GroupInputsPage } from './group-inputs.po';
+
+describe('Group Inputs Page', () => {
+  let page: GroupInputsPage;
+
+  beforeEach(() => {
+    page = new GroupInputsPage();
+  });
+
+  it('should display title', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Ionic Core Group Inputs Demo');
+  });
+
+  describe('radio group', () => {
+    it('should have the proper initial value', () => {
+      page.navigateTo();
+      const el = page.getRaioGroup();
+      expect(el.getAttribute('value')).toEqual('tripe');
+    });
+
+    it('should check the proper initial radio button', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      expect(btns.tripe.getAttribute('checked')).toEqual('true');
+      expect(btns.beef.getAttribute('checked')).toEqual(null);
+      expect(btns.chicken.getAttribute('checked')).toEqual(null);
+      expect(btns.brains.getAttribute('checked')).toEqual(null);
+      expect(btns.tongue.getAttribute('checked')).toEqual(null);
+    });
+
+    it('should reflect back the changed value', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      btns.chicken.click();
+      expect(page.getRadioOutputText()).toEqual('chicken');
+    });
+
+    it('should check and uncheck the proper buttons on a changed value', () => {
+      page.navigateTo();
+      const btns = page.getGroupedRadioButtons();
+      btns.chicken.click();
+      expect(btns.chicken.getAttribute('checked')).toEqual('true');
+      expect(btns.beef.getAttribute('checked')).toEqual(null);
+      expect(btns.tripe.getAttribute('checked')).toEqual(null);
+      expect(btns.brains.getAttribute('checked')).toEqual(null);
+      expect(btns.tongue.getAttribute('checked')).toEqual(null);
+    });
+  });
+
+  describe('non-grouped radios', () => {
+    it('should check the proper initial radio button', () => {
+      page.navigateTo();
+      const btns = page.getUngroupedRadioButtons();
+      expect(btns.tripe.getAttribute('checked')).toEqual('true');
+      expect(btns.beef.getAttribute('checked')).toEqual(null);
+      expect(btns.chicken.getAttribute('checked')).toEqual(null);
+      expect(btns.brains.getAttribute('checked')).toEqual(null);
+      expect(btns.tongue.getAttribute('checked')).toEqual(null);
+    });
+
+    it('should reflect back the changed value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getUngroupedRadioButtons();
+        btns.chicken.click();
+        expect(page.getRadioOutputText()).toEqual('chicken');
+      });
+    });
+
+    it('should check and uncheck the proper buttons on a changed value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getUngroupedRadioButtons();
+        btns.chicken.click();
+        expect(btns.chicken.getAttribute('checked')).toEqual('true');
+        expect(btns.beef.getAttribute('checked')).toEqual(null);
+        expect(btns.tripe.getAttribute('checked')).toEqual(null);
+        expect(btns.brains.getAttribute('checked')).toEqual(null);
+        expect(btns.tongue.getAttribute('checked')).toEqual(null);
+      });
+    });
+  });
+
+  describe('segments', () => {
+    it('should have the proper initial value', () => {
+      page.navigateTo();
+      const el = page.getSegment();
+      expect(el.getAttribute('value')).toEqual('tripe');
+    });
+
+    it('should reflect back the changed value', () => {
+      page.navigateTo();
+      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
+        const btns = page.getSegmentButtons();
+        btns.chicken.click();
+        expect(page.getRadioOutputText()).toEqual('chicken');
+      });
+    });
+  });
+
+  describe('select input', () => {
+    it('should be set the initial value', () => {
+      page.navigateTo();
+      const el = page.getIonicSelect();
+      expect(el.getAttribute('value')).toEqual('brains');
+    });
+  });
+});
--- a/angular/test/nav/e2e/group-inputs.po.ts
+++ b/angular/test/nav/e2e/group-inputs.po.ts
@@ -0,0 +1,61 @@
+import { browser, by, element } from 'protractor';
+
+export class GroupInputsPage {
+  navigateTo() {
+    return browser.get('/group-inputs');
+  }
+
+  getTitleText() {
+    return element(by.css('.title')).getText();
+  }
+
+  getRaioGroup() {
+    return element(by.id('radio-group'));
+  }
+
+  getGroupedRadioButtons() {
+    return {
+      beef: element(by.id('ion-grp-beef')),
+      tongue: element(by.id('ion-grp-tongue')),
+      brains: element(by.id('ion-grp-brains')),
+      tripe: element(by.id('ion-grp-tripe')),
+      chicken: element(by.id('ion-grp-chicken'))
+    };
+  }
+
+  getSegmentButtons() {
+    return {
+      beef: element(by.id('ion-seg-beef')),
+      tongue: element(by.id('ion-seg-tongue')),
+      brains: element(by.id('ion-seg-brains')),
+      tripe: element(by.id('ion-seg-tripe')),
+      chicken: element(by.id('ion-seg-chicken'))
+    };
+  }
+
+  getUngroupedRadioButtons() {
+    return {
+      beef: element(by.id('ion-beef')),
+      tongue: element(by.id('ion-tongue')),
+      brains: element(by.id('ion-brains')),
+      tripe: element(by.id('ion-tripe')),
+      chicken: element(by.id('ion-chicken'))
+    };
+  }
+
+  getSegment() {
+    return element(by.id('segment'));
+  }
+
+  getRadioOutputText() {
+    return element(by.id('radioOutput')).getText();
+  }
+
+  getIonicSelect() {
+    return element(by.id('ionSelect'));
+  }
+
+  getSelectOutput() {
+    return element(by.id('selectOutput')).getText();
+  }
+}
--- a/angular/test/nav/e2e/home.e2e-spec.ts
+++ b/angular/test/nav/e2e/home.e2e-spec.ts
@@ -0,0 +1,19 @@
+import { HomePage } from './home.po';
+
+describe('Demo Home Page', () => {
+  let page: HomePage;
+
+  beforeEach(() => {
+    page = new HomePage();
+  });
+
+  it('should display title', () => {
+    page.navigateTo();
+    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
+  });
+
+  it('should navigate to home for root', () => {
+    page.navigateToRoot();
+    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
+  });
+});
--- a/angular/test/nav/e2e/home.po.ts
+++ b/angular/test/nav/e2e/home.po.ts
@@ -0,0 +1,15 @@
+import { browser, by, element } from 'protractor';
+
+export class HomePage {
+  navigateTo() {
+    return browser.get('/home');
+  }
+
+  navigateToRoot() {
+    return browser.get('/');
+  }
+
+  getTitleText() {
+    return element(by.css('.title')).getText();
+  }
+}
--- a/angular/test/nav/e2e/loading.e2e-spec.ts
+++ b/angular/test/nav/e2e/loading.e2e-spec.ts
@@ -0,0 +1,31 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { LoadingPage } from './loading.po';
+import { sleep } from './utils/helpers';
+
+describe('Loading Page', () => {
+  let page: LoadingPage;
+
+  beforeEach(() => {
+    page = new LoadingPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the loading indicator, then close it', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let loading = await page.getLoading();
+    expect(loading).toBeTruthy();
+    await sleep(1000);
+    loading = null;
+    loading = await page.getLoading();
+    expect(await loading.isPresent()).toBeFalsy();
+    done();
+  });
+});
--- a/angular/test/nav/e2e/loading.po.ts
+++ b/angular/test/nav/e2e/loading.po.ts
@@ -0,0 +1,16 @@
+import { browser, by, element } from 'protractor';
+
+export class LoadingPage {
+  navigateTo() {
+    return browser.get('/loading');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getLoading() {
+    return element(by.css('ion-loading'));
+  }
+
+}
--- a/angular/test/nav/e2e/modal.e2e-spec.ts
+++ b/angular/test/nav/e2e/modal.e2e-spec.ts
@@ -0,0 +1,49 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { ModalPage } from './modal.po';
+import { sleep } from './utils/helpers';
+
+describe('Modal Page', () => {
+  let page: ModalPage;
+
+  beforeEach(() => {
+    page = new ModalPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the modal', async (done) => {
+    /*const button = await page.getButton();
+    await button.click();
+    await sleep(500);
+    const blah = page.getModal();
+    blah.isPresent().then((present) => {
+      console.log('boom boom boom: ', present);
+      done();
+    }).catch((ex) => {
+      console.log('caught it: ', ex);
+      done();
+    });
+    */
+    // console.log('blah: ', await blah.isPresent());
+    /*page.getModal().then((modal) => {
+      return modal.isPresent();
+    }).then((present) => {
+      console.log('boom boom boom: ', present);
+      done();
+    }).catch(() => {
+      console.log('caught it');
+      done();
+    })
+    */
+    done();
+    /*console.log('modal: ', modal);
+    console.log('modal.isPresent: ', modal.isPresent);
+    console.log('Got the modal: ', await modal.isPresent());
+    expect(await modal.isPresent()).toBeTruthy();
+    */
+  });
+});
--- a/angular/test/nav/e2e/modal.po.ts
+++ b/angular/test/nav/e2e/modal.po.ts
@@ -0,0 +1,20 @@
+import { browser, by, element } from 'protractor';
+
+export class ModalPage {
+  navigateTo() {
+    return browser.get('/modal');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getModal() {
+    return element(by.css('page-one'));
+  }
+
+  getDismissButton() {
+    return element(by.css('button.dismiss-btn'));
+  }
+
+}
--- a/angular/test/nav/e2e/popover.e2e-spec.ts
+++ b/angular/test/nav/e2e/popover.e2e-spec.ts
@@ -0,0 +1,33 @@
+import { browser, ElementFinder } from 'protractor/built';
+
+import { PopoverPage } from './popover.po';
+import { sleep } from './utils/helpers';
+
+describe('Popover Page', () => {
+  let page: PopoverPage;
+
+  beforeEach(() => {
+    page = new PopoverPage();
+  });
+
+  it('should open page', async (done) => {
+    await page.navigateTo();
+    done();
+  });
+
+  it('should open the popover, then close it using the close button', async (done) => {
+    const button = await page.getButton();
+    await sleep(100);
+    await button.click();
+    await sleep(500);
+    let popover = await page.getPopover();
+    expect(await popover.isPresent()).toBeTruthy();
+    const closeButton = await page.getCloseButton();
+    await closeButton.click();
+    await sleep(500);
+    popover = null;
+    popover = await page.getPopover();
+    expect(await popover.isPresent()).toBeFalsy();
+    done();
+  });
+});
--- a/angular/test/nav/e2e/popover.po.ts
+++ b/angular/test/nav/e2e/popover.po.ts
@@ -0,0 +1,19 @@
+import { browser, by, element } from 'protractor';
+
+export class PopoverPage {
+  navigateTo() {
+    return browser.get('/popover');
+  }
+
+  getButton() {
+    return element(by.css('ion-button'));
+  }
+
+  getPopover() {
+    return element(by.css('ion-popover'));
+  }
+
+  getCloseButton() {
+    return element(by.css('.popover-button'));
+  }
+}
--- a/angular/test/nav/e2e/tsconfig.e2e.json
+++ b/angular/test/nav/e2e/tsconfig.e2e.json
@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
--- a/angular/test/nav/e2e/utils/helpers.ts
+++ b/angular/test/nav/e2e/utils/helpers.ts
@@ -0,0 +1,6 @@
+
+export function sleep(duration: number = 300) {
+  return new Promise(resolve => {
+    setTimeout(resolve, duration);
+  });
+}
--- a/angular/test/nav/karma.conf.js
+++ b/angular/test/nav/karma.conf.js
@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function(config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    files: [
+      // TODO: I have not fully worked out how this will work.
+      //       Perhaps just the base include with a plugin?
+      { pattern: '../node_modules/@ionic/core/dist/ionic.js', watched: false, served: false, nocache: true, included: true }
+    ],
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
--- a/angular/test/nav/package-lock.json
+++ b/angular/test/nav/package-lock.json
--- a/angular/test/nav/package.json
+++ b/angular/test/nav/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@ionic/angular-demo",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "override-router": "rm -rf ./node_modules/@angular/router && mkdir ./node_modules/@angular/router && cp -R ./scripts/router ./node_modules/@angular"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "latest",
+    "@angular/common": "latest",
+    "@angular/compiler": "latest",
+    "@angular/core": "latest",
+    "@angular/forms": "latest",
+    "@angular/http": "latest",
+    "@angular/platform-browser": "latest",
+    "@angular/platform-browser-dynamic": "latest",
+    "@angular/router": "latest",
+    "@ionic/angular": "next",
+    "@ionic/core": "next",
+    "body-parser": "^1.18.2",
+    "core-js": "^2.4.1",
+    "express": "^4.16.2",
+    "rxjs": "^5.5.2",
+    "zone.js": "^0.8.14"
+  },
+  "devDependencies": {
+    "@angular/cli": "latest",
+    "@angular/compiler-cli": "latest",
+    "@angular/language-service": "latest",
+    "@types/jasmine": "~2.5.53",
+    "@types/jasminewd2": "~2.0.2",
+    "@types/node": "~6.0.60",
+    "codelyzer": "~3.2.0",
+    "jasmine-core": "~2.6.2",
+    "jasmine-spec-reporter": "~4.1.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.2",
+    "ts-node": "^3.2.2",
+    "tslint": "~5.7.0",
+    "typescript": "^2.5.2"
+  }
+}
--- a/angular/test/nav/protractor.conf.js
+++ b/angular/test/nav/protractor.conf.js
@@ -0,0 +1,28 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
--- a/angular/test/nav/server/server.ts
+++ b/angular/test/nav/server/server.ts
@@ -0,0 +1,25 @@
+import * as bodyParser from 'body-parser';
+import * as express from 'express';
+
+const app = express();
+
+app.set('port', process.env.PORT || 5000);
+
+app.use(bodyParser.urlencoded({extended: true}));
+app.use(bodyParser.json());
+
+app.use(function(req, res, next) {
+  res.header('Access-Control-Allow-Origin', '*');
+  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
+  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  next();
+});
+
+app.post('/test', (req, res) => {
+  res.send(req.body);
+});
+
+app.listen(app.get('port'), () => {
+  console.log('Node app is running on port', app.get('port'));
+});
--- a/angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts
+++ b/angular/test/nav/src/app/action-sheet/action-sheet-page.component.ts
@@ -0,0 +1,66 @@
+import { Component } from '@angular/core';
+
+import { ActionSheetController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-action-sheet-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic ActionSheet</ion-button>
+    </ion-content>
+</ion-app>
+  `
+})
+export class ActionSheetPageComponent {
+
+  constructor(private actionSheetController: ActionSheetController) {
+
+  }
+
+  async clickMe() {
+    const actionSheet = await this.actionSheetController.create({
+      title: 'Albums',
+      buttons: [{
+        text: 'Delete',
+        role: 'destructive',
+        icon: 'trash',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Share',
+        icon: 'share',
+        handler: () => {
+          console.log('Share clicked');
+        }
+      }, {
+        text: 'Play (open modal)',
+        icon: 'arrow-dropright-circle',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, {
+        text: 'Favorite',
+        icon: 'heart',
+        handler: () => {
+          console.log('Favorite clicked');
+        }
+      }, {
+        text: 'Cancel',
+        role: 'cancel',
+        icon: 'close',
+        handler: () => {
+          console.log('Cancel clicked');
+        }
+      }]
+    });
+    return actionSheet.present();
+  }
+
+}
--- a/angular/test/nav/src/app/action-sheet/action-sheet-routing.module.ts
+++ b/angular/test/nav/src/app/action-sheet/action-sheet-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ActionSheetPageComponent } from './action-sheet-page.component';
+
+const routes: Routes = [
+  { path: '', component: ActionSheetPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ActionSheetRoutingModule { }
--- a/angular/test/nav/src/app/action-sheet/action-sheet.module.ts
+++ b/angular/test/nav/src/app/action-sheet/action-sheet.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ActionSheetPageComponent } from './action-sheet-page.component';
+import { ActionSheetRoutingModule } from './action-sheet-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ActionSheetRoutingModule
+  ],
+  declarations: [ActionSheetPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ActionSheetModule { }
--- a/angular/test/nav/src/app/alert/alert-page.component.ts
+++ b/angular/test/nav/src/app/alert/alert-page.component.ts
@@ -0,0 +1,48 @@
+import { Component } from '@angular/core';
+
+import { AlertController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-alert-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic Alert</ion-button>
+    </ion-content>
+</ion-app>
+  `
+})
+export class AlertPageComponent {
+
+  constructor(private alertController: AlertController) {}
+
+  async clickMe() {
+    const alert = await this.alertController.create({
+      title: 'ohhhh snap',
+      message: 'Ive been injected via Angular keeping the old api',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'Cancel',
+          handler: () => {
+            // console.log('cancel');
+          }
+        },
+        {
+          text: 'Okay',
+          role: 'Okay',
+          handler: () => {
+            // console.log('okay');
+          }
+        }
+      ]
+    });
+    return alert.present();
+  }
+
+}
--- a/angular/test/nav/src/app/alert/alert-routing.module.ts
+++ b/angular/test/nav/src/app/alert/alert-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AlertPageComponent } from './alert-page.component';
+
+const routes: Routes = [
+  { path: '', component: AlertPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AlertRoutingModule { }
--- a/angular/test/nav/src/app/alert/alert.module.ts
+++ b/angular/test/nav/src/app/alert/alert.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AlertPageComponent } from './alert-page.component';
+import { AlertRoutingModule } from './alert-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AlertRoutingModule
+  ],
+  declarations: [AlertPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AlertModule { }
--- a/angular/test/nav/src/app/app-routing.module.ts
+++ b/angular/test/nav/src/app/app-routing.module.ts
@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'basic-inputs', loadChildren: 'app/basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
+  { path: 'show-hide-when', loadChildren: 'app/show-hide-when/show-hide-when.module#ShowHideWhenModule' },
+  { path: 'form-sample', loadChildren: 'app/form-sample-page/form-sample-page.module#FormSamplePageModule' },
+  { path: 'group-inputs', loadChildren: 'app/group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
+  { path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
+  { path: 'alert', loadChildren: 'app/alert/alert.module#AlertModule' },
+  { path: 'actionSheet', loadChildren: 'app/action-sheet/action-sheet.module#ActionSheetModule' },
+  { path: 'badge', loadChildren: 'app/badge/badge.module#BadgeModule' },
+  { path: 'card', loadChildren: 'app/card/card.module#CardModule' },
+  { path: 'content', loadChildren: 'app/content/content.module#ContentModule' },
+  { path: 'toast', loadChildren: 'app/toast/toast.module#ToastModule' },
+  { path: 'loading', loadChildren: 'app/loading/loading.module#LoadingModule' },
+  { path: 'modal', loadChildren: 'app/modal/modal.module#ModalModule' },
+  { path: 'popover', loadChildren: 'app/popover/popover.module#PopoverModule' },
+  { path: 'segment', loadChildren: 'app/segment/segment.module#SegmentModule' },
+  { path: 'virtual-scroll', loadChildren: 'app/virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
+
+  { path: 'no-routing-nav', loadChildren: 'app/no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
+  { path: 'simple-nav', loadChildren: 'app/simple-nav/simple-nav.module#SimpleNavModule' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
--- a/angular/test/nav/src/app/app.component.css
+++ b/angular/test/nav/src/app/app.component.css
--- a/angular/test/nav/src/app/app.component.html
+++ b/angular/test/nav/src/app/app.component.html
@@ -0,0 +1,2 @@
+
+<router-outlet></router-outlet>
--- a/angular/test/nav/src/app/app.component.spec.ts
+++ b/angular/test/nav/src/app/app.component.spec.ts
@@ -0,0 +1,20 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { RouterOutletStubComponent } from '../../testing/router-stubs';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach( async(() => {
+      TestBed.configureTestingModule({
+        declarations: [AppComponent, RouterOutletStubComponent]
+      }).compileComponents();
+    })
+  );
+
+  it('should create the app', async(() => {
+      const fixture = TestBed.createComponent(AppComponent);
+      const app = fixture.debugElement.componentInstance;
+      expect(app).toBeTruthy();
+    })
+  );
+});
--- a/angular/test/nav/src/app/app.component.ts
+++ b/angular/test/nav/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'app';
+}
--- a/angular/test/nav/src/app/app.module.ts
+++ b/angular/test/nav/src/app/app.module.ts
@@ -0,0 +1,23 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppComponent } from './app.component';
+import { AppRoutingModule } from './app-routing.module';
+import { PostTestService } from './post-test/post-test.service';
+
+import { IonicAngularModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    AppRoutingModule,
+    BrowserModule,
+    HttpClientModule,
+    IonicAngularModule.forRoot(),
+  ],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [PostTestService]
+})
+export class AppModule { }
--- a/angular/test/nav/src/app/badge/badge-page.component.ts
+++ b/angular/test/nav/src/app/badge/badge-page.component.ts
@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-badge-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Badges</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-list>
+        <ion-list-header>Badges Right</ion-list-header>
+        <ion-item>
+          <ion-badge slot="end" color="primary">99</ion-badge>
+          <ion-label>Default Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="primary">99</ion-badge>
+          <ion-label>Primary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="secondary">99</ion-badge>
+          <ion-label>Secondary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="danger">99</ion-badge>
+          <ion-label>Danger Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="light">99</ion-badge>
+          <ion-label>Light Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="end" color="dark">99</ion-badge>
+          <ion-label>Dark Badge</ion-label>
+        </ion-item>
+        <ion-item (click)="toggleColor()">
+          <ion-badge slot="end" [color]="dynamicColor">{{dynamicColor}}</ion-badge>
+          <ion-label>Dynamic Badge Color (toggle)</ion-label>
+        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>Badges Left</ion-list-header>
+        <ion-item>
+          <ion-badge slot="start" color="primary">99</ion-badge>
+          <ion-label>Default Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="primary">99</ion-badge>
+          <ion-label>Primary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="secondary">99</ion-badge>
+          <ion-label>Secondary Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="danger">99</ion-badge>
+          <ion-label>Danger Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="light">99</ion-badge>
+          <ion-label>Light Badge</ion-label>
+        </ion-item>
+        <ion-item>
+          <ion-badge slot="start" color="dark">99</ion-badge>
+          <ion-label>Dark Badge</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+</ion-app>
+  `
+})
+export class BadgePageComponent {
+  dynamicColor = 'primary';
+
+  constructor() {
+
+  }
+
+  toggleColor() {
+    if (this.dynamicColor === 'primary') {
+      this.dynamicColor = 'secondary';
+    } else if (this.dynamicColor === 'secondary') {
+      this.dynamicColor = 'danger';
+    } else {
+      this.dynamicColor = 'primary';
+    }
+  }
+}
--- a/angular/test/nav/src/app/badge/badge-routing.module.ts
+++ b/angular/test/nav/src/app/badge/badge-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BadgePageComponent } from './badge-page.component';
+
+const routes: Routes = [
+  { path: '', component: BadgePageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BadgeRoutingModule { }
--- a/angular/test/nav/src/app/badge/badge.module.ts
+++ b/angular/test/nav/src/app/badge/badge.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BadgePageComponent } from './badge-page.component';
+import { BadgeRoutingModule } from './badge-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BadgeRoutingModule
+  ],
+  declarations: [BadgePageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BadgeModule { }
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page-routing.module.ts
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { BasicInputsPageComponent } from './basic-inputs-page.component';
+
+const routes: Routes = [
+  { path: '', component: BasicInputsPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class BasicInputsPageRoutingModule { }
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.html
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.html
@@ -0,0 +1,262 @@
+<div class="title">
+  Ionic Core Basic Inputs Demo
+</div>
+
+<ion-grid>
+
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Disable Inputs</ion-label>
+        <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Text Input</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdTextInput">Standard Input</label>
+      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs" />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="textOutput">{{textValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Text Input</ion-label>
+        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs"></ion-input>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </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" [disabled]="disableInputs"></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>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Numeric Input</ion-label>
+        <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue" [disabled]="disableInputs"></ion-input>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+      <div>
+        Value:
+        <span id="numericOutput">{{numericValue}}</span>
+      </div>
+      <div>
+        Type:
+        <span id="numericOutputType">{{typeOf(numericValue)}}</span>
+      </div>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Textarea Input</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdTextareaInput">Standard Textarea Input</label>
+      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></textarea>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="textareaOutput">{{textareaValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Textarea Input</ion-label>
+        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></ion-textarea>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Checkbox</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdCheckbox">Standard Checkbox</label>
+      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs" />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="checkboxOutput">{{checkboxValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Checkbox</ion-label>
+        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Checkbox No ngModel</ion-label>
+        <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"
+          [disabled]="disableInputs"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Toggle</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdToggle">Standard Toggle</label>
+      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs" />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="toggleOutput">{{toggleValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Toggle</ion-label>
+        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs"></ion-toggle>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Select</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdSelect">Select</label>
+      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs">
+        <option value="bacon">Bacon</option>
+        <option value="pepperoni">Pepperoni</option>
+        <option value="ham" selected>Ham</option>
+        <option value="sausage">Sausage</option>
+        <option value="pineapple">Pineapple</option>
+      </select>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="selectOutput">{{selectValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Select</ion-label>
+        <ion-select id="ionSelectInput" [(ngModel)]="selectValue" [disabled]="disableInputs">
+          <ion-select-option value="bacon">Bacon</ion-select-option>
+          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
+          <ion-select-option value="ham" selected>Ham</ion-select-option>
+          <ion-select-option value="sausage">Sausage</ion-select-option>
+          <ion-select-option value="pineapple">Pineapple</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Date Time Picker</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdToggle">ISO Formatted Date</label>
+      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs"
+      />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="datetimeOutput">{{datetimeValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Date</ion-label>
+        <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput"
+          [(ngModel)]="datetimeValue" [disabled]="disableInputs"></ion-datetime>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Range</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdRangeInput">Range Value</label>
+      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"  [disabled]="disableInputs" />
+    </ion-col>
+    <ion-col>
+      Value:
+      <span>{{rangeValue}}</span>
+      <span>{{typeOf(rangeValue)}}</span>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue" [disabled]="disableInputs"></ion-range>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
+</ion-grid>
+
+<a href='home'>Home</a>
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.scss
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.scss
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts
@@ -0,0 +1,55 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { BasicInputsPageComponent } from './basic-inputs-page.component';
+
+describe('InputsTestPageComponent', () => {
+  let component: BasicInputsPageComponent;
+  let fixture: ComponentFixture<BasicInputsPageComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        declarations: [BasicInputsPageComponent],
+        imports: [FormsModule, IonicAngularModule.forRoot()],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BasicInputsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('testInputOne binding', () => {
+    let input;
+    beforeEach(
+      fakeAsync(() => {
+        component.ngOnInit();
+        fixture.detectChanges();
+        tick();
+        input = fixture.debugElement.query(By.css('#stdTextInput')).nativeElement;
+        // This is what I ultimtely want to test...
+        //
+        // const ionInput = fixture.debugElement.query(By.css('#ionTextInput'));
+        // input = ionInput.query(By.css('input')).nativeElement;
+      })
+    );
+
+    it('should reflect changes to the input', () => {
+      expect(input).toBeTruthy();
+      input.value = 'Frank';
+      input.dispatchEvent(new Event('input'));
+      expect(component.textValue).toEqual('Frank');
+    });
+  });
+});
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.ts
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.component.ts
@@ -0,0 +1,31 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-inputs-page',
+  templateUrl: './basic-inputs-page.component.html',
+  styleUrls: ['./basic-inputs-page.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class BasicInputsPageComponent implements OnInit {
+  disableInputs = false;
+
+  datetimeValue = '2017-11-18T14:17:45-06:00';
+  textareaValue = 'This is the Textarea Input';
+  textValue = 'This is the Text Input';
+  numericValue = 1138;
+
+  checkboxValue = true;
+  toggleValue = false;
+
+  rangeValue = 15;
+
+  searchValue: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  typeOf(v: any): string {
+    return typeof v;
+  }
+}
--- a/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.module.ts
+++ b/angular/test/nav/src/app/basic-inputs-page/basic-inputs-page.module.ts
@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { BasicInputsPageComponent } from './basic-inputs-page.component';
+import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
+
+@NgModule({
+  imports: [
+    BasicInputsPageRoutingModule,
+    CommonModule,
+    FormsModule,
+    IonicAngularModule
+  ],
+  declarations: [BasicInputsPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class BasicInputsPageModule {}
--- a/angular/test/nav/src/app/card/card-page.component.ts
+++ b/angular/test/nav/src/app/card/card-page.component.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Card</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-card>
+        <ion-card-header>
+          <ion-card-title>Card Header</ion-card-title>
+        </ion-card-header>
+
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile,
+          and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card>
+        <ion-item>
+          <ion-icon name="pin" slot="start"></ion-icon>
+          ion-item in a card, icon left, button right
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
+
+        <ion-card-content>
+          This is content, without any paragraph or header tags,
+          within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>
+
+      <ion-card>
+        <ion-item href="#" class="activated">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          Card Link Item 1 .activated
+        </ion-item>
+
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          Card Link Item 2
+        </ion-item>
+
+        <ion-item class="activated">
+          <ion-icon name="warning" slot="start"></ion-icon>
+          Card Button Item 1 .activated
+        </ion-item>
+
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          Card Button Item 2
+        </ion-item>
+      </ion-card>
+    </ion-content>
+</ion-app>
+  `
+})
+export class CardPageComponent {
+  constructor() {
+
+  }
+
+  toggleColor() {
+
+  }
+}
--- a/angular/test/nav/src/app/card/card-routing.module.ts
+++ b/angular/test/nav/src/app/card/card-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { CardPageComponent } from './card-page.component';
+
+const routes: Routes = [
+  { path: '', component: CardPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class CardRoutingModule { }
--- a/angular/test/nav/src/app/card/card.module.ts
+++ b/angular/test/nav/src/app/card/card.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CardPageComponent } from './card-page.component';
+import { CardRoutingModule } from './card-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CardRoutingModule
+  ],
+  declarations: [CardPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class CardModule { }
--- a/angular/test/nav/src/app/content/content-page.component.ts
+++ b/angular/test/nav/src/app/content/content-page.component.ts
@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-page',
+  styles: [
+    `
+      div.box {
+        display: block;
+        margin: 15px auto;
+        max-width: 150px;
+        height: 150px;
+        background: blue;
+      }
+
+      div.box:last-of-type {
+        background: yellow;
+      }
+    `
+  ],
+  template: `
+  <ion-app>
+  <ion-header #header>
+    <ion-toolbar style="display: none" #toolbar>
+      <ion-title>Hidden Toolbar</ion-title>
+    </ion-toolbar>
+    <ion-toolbar>
+      <ion-title>Content - Basic</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+    <ion-content padding style="text-align: center" #content>
+      <p>
+      <ion-button (click)="toggleFullscreen(content)">Toggle content.fullscreen</ion-button>
+      <p>
+        <ion-button (click)="toggleDisplay(header)" color="secondary">Toggle header</ion-button>
+        <ion-button (click)="toggleDisplay(footer)" color="secondary">Toggle footer</ion-button>
+        <ion-button (click)="toggleDisplay(toolbar)" color="secondary">Toggle 2nd toolbar</ion-button>
+      </p>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+      <div class="box"></div>
+    </ion-content>
+
+
+  <ion-footer #footer>
+    <ion-toolbar>
+      <ion-title>Footer</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</ion-app>
+  `
+})
+export class ContentPageComponent {
+  constructor() {}
+
+  toggleFullscreen(content) {
+    content.fullscreen = !content.fullscreen;
+    console.log('content.fullscren =', content.fullscreen);
+  }
+
+  toggleDisplay(el) {
+    el.style.display = !el.style.display ? 'none' : null;
+  }
+}
--- a/angular/test/nav/src/app/content/content-routing.module.ts
+++ b/angular/test/nav/src/app/content/content-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ContentPageComponent } from './content-page.component';
+
+const routes: Routes = [
+  { path: '', component: ContentPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ContentRoutingModule { }
--- a/angular/test/nav/src/app/content/content.module.ts
+++ b/angular/test/nav/src/app/content/content.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ContentPageComponent } from './content-page.component';
+import { ContentRoutingModule } from './content-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ContentRoutingModule
+  ],
+  declarations: [ContentPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ContentModule { }
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page-routing.module.ts
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+
+const routes: Routes = [
+  { path: '', component: FormSamplePageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class FormSamplePageRoutingModule { }
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page.component.html
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page.component.html
@@ -0,0 +1,88 @@
+<ion-app>
+  <form #myForm="ngForm">
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Sample Form</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <ion-list>
+          <ion-item>
+            <ion-label floating>First Name</ion-label>
+            <ion-input name="firstName" #viewFirstName="ngModel" [(ngModel)]="firstName" required minlength="2"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewFirstName.invalid && (viewFirstName.dirty || viewFirstName.touched)" color="danger">
+            <small *ngIf="viewFirstName.errors['required']">First Name is required</small>
+            <small *ngIf="viewFirstName.errors['minlength']">First Name must be at least 2 characters long</small>
+          </ion-text>
+          <ion-item>
+            <ion-label floating>Last Name</ion-label>
+            <ion-input name="lastName" #viewLastName="ngModel" [(ngModel)]="lastName" required minlength="4"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewLastName.invalid && (viewLastName.dirty || viewLastName.touched)" color="danger">
+            <small *ngIf="viewLastName.errors['required']">Last Name is required</small>
+            <small *ngIf="viewLastName.errors['minlength']">Last Name must be at least 4 characters long</small>
+          </ion-text>
+          <ion-item>
+            <ion-label>Desired Job Title</ion-label>
+            <ion-select name="jobTitle" [(ngModel)]="jobTitle" #viewJobTitle="ngModel" required>
+              <ion-select-option value="manager">Cat Herder</ion-select-option>
+              <ion-select-option value="captain">Nerf Herder (Scruffy)</ion-select-option>
+              <ion-select-option value="engineer">Cat</ion-select-option>
+              <ion-select-option value="tester">Trier of Things</ion-select-option>
+            </ion-select>
+          </ion-item>
+          <ion-text *ngIf="viewJobTitle.invalid && (viewJobTitle.dirty || viewJobTitle.touched)" color="danger">
+            <small *ngIf="viewJobTitle.errors['required']">Job Title is required</small>
+          </ion-text>
+          <ion-divider>
+            <ion-label>I Would Like To:</ion-label>
+          </ion-divider>
+          <ion-item>
+            <ion-label>Drink the Beers</ion-label>
+            <ion-toggle name="drinkBeers" color="dark" [(ngModel)]="drinkBeers"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Drink the Teas</ion-label>
+            <ion-toggle name="drinkTeas" color="secondary" [(ngModel)]="drinkTeas"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Make the Coffees</ion-label>
+            <ion-toggle name="makeCoffee" color="primary" [(ngModel)]="makeCoffee"></ion-toggle>
+          </ion-item>
+          <ion-item>
+            <ion-label>Feed the Engineers</ion-label>
+            <ion-toggle name="feedEngineers" color="danger" [(ngModel)]="feedEngineers"></ion-toggle>
+          </ion-item>
+            <ion-item>
+            <ion-label floating>Short Self Description</ion-label>
+            <ion-textarea name="selfDescription" #viewSelfDescription="ngModel" [(ngModel)]="selfDescription" required minlength="25"></ion-textarea>
+          </ion-item>
+          <ion-text *ngIf="viewSelfDescription.invalid && (viewSelfDescription.dirty || viewSelfDescription.touched)" color="danger">
+            <small *ngIf="viewSelfDescription.errors['required']">Self Description is required</small>
+            <small *ngIf="viewSelfDescription.errors['minlength']">Please tell us more</small>
+          </ion-text>
+          <ion-item>
+            <ion-label floating>Desired Salary</ion-label>
+            <ion-input name="desiredSalary" #viewSalary="ngModel" type="number" required [(ngModel)]="desiredSalary"></ion-input>
+          </ion-item>
+          <ion-text *ngIf="viewSalary.invalid && (viewSalary.dirty || viewSalary.touched)" color="danger">
+            <small *ngIf="viewSalary.errors['required']">Desired Salary is required</small>
+          </ion-text>
+          <ion-divider>
+            <ion-label>My Level of Happy</ion-label>
+          </ion-divider>
+          <ion-item>
+            <ion-range name="levelOfHappy" [(ngModel)]="levelOfHappy">
+              <ion-icon name="sad" slot="start"></ion-icon>
+              <ion-icon name="happy" slot="end"></ion-icon>
+            </ion-range>
+          </ion-item>
+        </ion-list>
+      </ion-content>
+      <ion-footer>
+        <ion-button expand="block" [disabled]="myForm.invalid" (click)="save(myForm.value)">
+          <ion-icon name="save" slot="start"></ion-icon>Looks Good to Me</ion-button>
+      </ion-footer>
+  </form>
+</ion-app>
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page.component.scss
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page.component.scss
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page.component.spec.ts
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+
+describe('FormSamplePageComponent', () => {
+  let component: FormSamplePageComponent;
+  let fixture: ComponentFixture<FormSamplePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FormSamplePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormSamplePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page.component.ts
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { PostTestService } from '../post-test/post-test.service';
+
+@Component({
+  selector: 'app-form-sample-page',
+  templateUrl: './form-sample-page.component.html',
+  styleUrls: ['./form-sample-page.component.scss']
+})
+export class FormSamplePageComponent implements OnInit {
+  firstName: string;
+  lastName: string;
+  jobTitle: string;
+
+  drinkBeers: boolean;
+  drinkTeas: boolean;
+  makeCoffee: boolean;
+  feedEngineers: boolean;
+
+  selfDescription: string;
+  desiredSalary: number;
+  levelOfHappy: number;
+
+  constructor(private postman: PostTestService, private router: Router) { }
+
+  ngOnInit() { }
+
+  save(data: any) {
+    this.postman.post(data).subscribe(res => console.log(res));
+    this.router.navigate(['home']);
+  }
+}
--- a/angular/test/nav/src/app/form-sample-page/form-sample-page.module.ts
+++ b/angular/test/nav/src/app/form-sample-page/form-sample-page.module.ts
@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+import { FormSamplePageRoutingModule } from './form-sample-page-routing.module';
+
+@NgModule({
+  imports: [
+    FormSamplePageRoutingModule,
+    CommonModule,
+    FormsModule,
+    IonicAngularModule
+  ],
+  declarations: [FormSamplePageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class FormSamplePageModule {}
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page-routing.module.ts
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GroupInputsPageComponent } from './group-inputs-page.component';
+
+const routes: Routes = [
+  { path: '', component: GroupInputsPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class GroupInputsPageRoutingModule { }
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.html
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.html
@@ -0,0 +1,167 @@
+<div class="title">
+  Ionic Core Group Inputs Demo
+</div>
+
+<ion-grid>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Disable Inputs</ion-label>
+        <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
+      </ion-item>
+    </ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Radio Buttons</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Angular</h3>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <input id="stdBeef" type="radio" value="beef" [(ngModel)]="radioValue" [disabled]="disableInputs" />
+      <label for="stdBeef">Carne Asada</label>
+      <input id="stdTongue" type="radio" value="tongue" [(ngModel)]="radioValue" [disabled]="disableInputs" />
+      <label for="stdTongue">Lengua</label>
+      <input id="stdBrains" type="radio" value="brains" [(ngModel)]="radioValue" [disabled]="disableInputs" />
+      <label for="stdBrains">Sesos</label>
+      <input id="stdTripe" type="radio" value="tripe" [(ngModel)]="radioValue" [disabled]="disableInputs" />
+      <label for="stdTripe">Tripa</label>
+      <input id="stdChicken" type="radio" value="chicken" [(ngModel)]="radioValue" [disabled]="disableInputs" />
+      <label for="stdChicken">Pollo</label>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="radioOutput">{{radioValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Ionic With Radio Group</h3>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-list>
+        <ion-radio-group id="radio-group" [(ngModel)]="radioValue" [disabled]="disableInputs">
+          <ion-item>
+            <ion-label>Crarne Asada</ion-label>
+            <ion-radio id="ion-grp-beef" value="beef"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>Lengua</ion-label>
+            <ion-radio id="ion-grp-tongue" value="tongue"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>Sesos</ion-label>
+            <ion-radio id="ion-grp-brains" value="brains"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>Tripa</ion-label>
+            <ion-radio id="ion-grp-tripe" value="tripe"></ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-label>Pollo</ion-label>
+            <ion-radio id="ion-grp-chicken" value="chicken"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <h3>Ionic Without Radio Group</h3>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-list>
+        <ion-item>
+          <ion-label>Crarne Asada</ion-label>
+          <ion-radio value="beef" id="ion-beef" name="tacos" [(ngModel)]="radioValue" [disabled]="disableInputs"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Lengua</ion-label>
+          <ion-radio value="tongue" id="ion-tongue" name="tacos" [(ngModel)]="radioValue" [disabled]="disableInputs"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Sesos</ion-label>
+          <ion-radio value="brains" id="ion-brains" name="tacos" [(ngModel)]="radioValue" [disabled]="disableInputs"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Tripa</ion-label>
+          <ion-radio value="tripe" id="ion-tripe" name="tacos" [(ngModel)]="radioValue" [disabled]="disableInputs"></ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-label>Pollo</ion-label>
+          <ion-radio value="chicken" id="ion-chicken" name="tacos" [(ngModel)]="radioValue" [disabled]="disableInputs"></ion-radio>
+        </ion-item>
+      </ion-list>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Ionic Segment</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-segment id="segment" color="primary" [(ngModel)]="radioValue" [disabled]="disableInputs">
+        <ion-segment-button value="beef" id="ion-seg-beef">Carne Asada</ion-segment-button>
+        <ion-segment-button value="tongue" id="ion-seg-tongue">Lengua</ion-segment-button>
+        <ion-segment-button value="brains" id="ion-seg-brains">Sesos</ion-segment-button>
+        <ion-segment-button value="tripe" id="ion-seg-tripe">Tripa</ion-segment-button>
+        <ion-segment-button value="chicken" id="ion-seg-chicken">Pollo</ion-segment-button>
+      </ion-segment>
+    </ion-col>
+    <ion-col></ion-col>
+  </ion-row>
+
+  <ion-row>
+    <ion-col>
+      <h2>Select</h2>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <label for="stdSelect">Standard Select (for tacos)</label>
+      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" [disabled]="disableInputs">
+        <option value="beef">Carne Asada</option>
+        <option value="tongue">Lengua</option>
+        <option value="brains">Sesos</option>
+        <option value="tripe">Tripa</option>
+        <option value="chicken">Pollo</option>
+      </select>
+    </ion-col>
+    <ion-col>
+      Value:
+      <span id="selectOutput">{{selectValue}}</span>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col>
+      <ion-item>
+        <ion-label>Ionic Select (for tacos)</ion-label>
+        <ion-select id="ionSelect" name="ionSelect" [(ngModel)]="selectValue" [disabled]="disableInputs">
+          <ion-select-option value="beef">Carne Asada</ion-select-option>
+          <ion-select-option value="tongue">Lengua</ion-select-option>
+          <ion-select-option value="brains">Sesos</ion-select-option>
+          <ion-select-option value="tripe">Tripa</ion-select-option>
+          <ion-select-option value="chicken">Pollo</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-col>
+    <ion-col>
+    </ion-col>
+  </ion-row>
+
+</ion-grid>
+<a href='home'>Home</a>
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.scss
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.scss
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.spec.ts
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.spec.ts
@@ -0,0 +1,31 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { GroupInputsPageComponent } from './group-inputs-page.component';
+
+describe('GroupInputsPageComponent', () => {
+  let component: GroupInputsPageComponent;
+  let fixture: ComponentFixture<GroupInputsPageComponent>;
+
+  beforeEach(
+    async(() => {
+      TestBed.configureTestingModule({
+        imports: [FormsModule, IonicAngularModule],
+        declarations: [GroupInputsPageComponent],
+        schemas: [CUSTOM_ELEMENTS_SCHEMA]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GroupInputsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.ts
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page.component.ts
@@ -0,0 +1,18 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-group-inputs-page',
+  templateUrl: './group-inputs-page.component.html',
+  styleUrls: ['./group-inputs-page.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class GroupInputsPageComponent implements OnInit {
+  disableInputs = false;
+
+  radioValue = 'tripe';
+  selectValue = 'brains';
+
+  constructor() {}
+
+  ngOnInit() {}
+}
--- a/angular/test/nav/src/app/group-inputs-page/group-inputs-page.module.ts
+++ b/angular/test/nav/src/app/group-inputs-page/group-inputs-page.module.ts
@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { GroupInputsPageComponent } from './group-inputs-page.component';
+import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    GroupInputsPageRoutingModule,
+    IonicAngularModule
+  ],
+  declarations: [GroupInputsPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GroupInputsPageModule {}
--- a/angular/test/nav/src/app/home-page/home-page-routing.module.ts
+++ b/angular/test/nav/src/app/home-page/home-page-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HomePageComponent } from './home-page.component';
+
+const routes: Routes = [
+  { path: '', component: HomePageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class HomePageRoutingModule { }
--- a/angular/test/nav/src/app/home-page/home-page.component.html
+++ b/angular/test/nav/src/app/home-page/home-page.component.html
@@ -0,0 +1,66 @@
+<div class='title'>
+  Ionic Core Angular Demo Application
+</div>
+
+<div>
+  <ul>
+    <li>
+      <a [routerLink]="['/show-hide-when']">Show/Hide When Test Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/basic-inputs']">Basic Inputs Test Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/group-inputs']">Group Inputs Test Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/form-sample']">Form Sample Test Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/alert']">Alert Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/badge']">Badge Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/card']">Card Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/content']">Content Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/actionSheet']">Action Sheet Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/toast']">Toast Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/loading']">Loading Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/modal']">Modal Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/popover']">Popover Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/segment']">Segment Page</a>
+    </li>
+    <li>
+      <a [routerLink]="['/virtual-scroll']">Virtual Scroll Page</a>
+    </li>
+  </ul>
+</div>
+
+<div>
+  <h2>Nav Tests</h2>
+  <ul>
+    <li>
+      <a href='no-routing-nav'>No Routing</a>
+    </li>
+    <li>
+      <a href='simple-nav/page-one'>Simple Nav</a>
+    </li>
+  </ul>
+
+</div>
--- a/angular/test/nav/src/app/home-page/home-page.component.scss
+++ b/angular/test/nav/src/app/home-page/home-page.component.scss
--- a/angular/test/nav/src/app/home-page/home-page.component.spec.ts
+++ b/angular/test/nav/src/app/home-page/home-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePageComponent } from './home-page.component';
+
+describe('HomePageComponent', () => {
+  let component: HomePageComponent;
+  let fixture: ComponentFixture<HomePageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomePageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/angular/test/nav/src/app/home-page/home-page.component.ts
+++ b/angular/test/nav/src/app/home-page/home-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-home-page',
+  templateUrl: './home-page.component.html',
+  styleUrls: ['./home-page.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class HomePageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() { }
+
+}
--- a/angular/test/nav/src/app/home-page/home-page.module.ts
+++ b/angular/test/nav/src/app/home-page/home-page.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HomePageComponent } from './home-page.component';
+import { HomePageRoutingModule } from './home-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HomePageRoutingModule
+  ],
+  declarations: [HomePageComponent]
+})
+export class HomePageModule { }
--- a/angular/test/nav/src/app/loading/loading-page.component.ts
+++ b/angular/test/nav/src/app/loading/loading-page.component.ts
@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+
+import { LoadingController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-loading-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-button (click)="clickMe()">Open Basic Loading</ion-button>
+    </ion-content>
+</ion-app>
+  `
+})
+export class LoadingPageComponent {
+
+  constructor(private loadingController: LoadingController) {
+
+  }
+
+  async clickMe() {
+    const loading = await this.loadingController.create({
+      duration: 1000,
+      content: 'Ahem. Please wait.'
+    });
+    return loading.present();
+  }
+
+}
--- a/angular/test/nav/src/app/loading/loading-routing.module.ts
+++ b/angular/test/nav/src/app/loading/loading-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LoadingPageComponent } from './loading-page.component';
+
+const routes: Routes = [
+  { path: '', component: LoadingPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LoadingRoutingModule { }
--- a/angular/test/nav/src/app/loading/loading.module.ts
+++ b/angular/test/nav/src/app/loading/loading.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoadingPageComponent } from './loading-page.component';
+import { LoadingRoutingModule } from './loading-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    LoadingRoutingModule
+  ],
+  declarations: [LoadingPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class LoadingModule { }
--- a/angular/test/nav/src/app/modal/modal-page-to-present.ts
+++ b/angular/test/nav/src/app/modal/modal-page-to-present.ts
@@ -0,0 +1,41 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'page-one',
+  template: `
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page One</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    Page One
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+    </ul>
+    <ion-button class="dismiss-btn" (click)="dismiss()">Close Modal</ion-button>
+  </ion-content>
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class ModalPageToPresent {
+
+  ngOnInitDetection = 'initial';
+
+  constructor(private modalController: ModalController) {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page one ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  dismiss() {
+    this.modalController.dismiss();
+  }
+}
--- a/angular/test/nav/src/app/modal/modal-page.component.ts
+++ b/angular/test/nav/src/app/modal/modal-page.component.ts
@@ -0,0 +1,33 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ModalController } from '@ionic/angular';
+import { ModalPageToPresent } from './modal-page-to-present';
+
+@Component({
+  selector: 'app-modal-page',
+  template: `
+  <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Test</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <ion-button (click)="clickMe()">Open Basic Modal</ion-button>
+      </ion-content>
+</ion-app>,
+  `,
+  encapsulation: ViewEncapsulation.None
+})
+export class ModalPageComponent {
+
+  constructor(private modalController: ModalController) {
+  }
+
+  async clickMe() {
+    const modal = await this.modalController.create({
+      component: ModalPageToPresent
+    });
+    return modal.present();
+  }
+}
--- a/angular/test/nav/src/app/modal/modal-routing.module.ts
+++ b/angular/test/nav/src/app/modal/modal-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ModalPageComponent } from './modal-page.component';
+
+const routes: Routes = [
+  { path: '', component: ModalPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ModalRoutingModule { }
--- a/angular/test/nav/src/app/modal/modal.module.ts
+++ b/angular/test/nav/src/app/modal/modal.module.ts
@@ -0,0 +1,27 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { ModalPageComponent } from './modal-page.component';
+import { ModalRoutingModule } from './modal-routing.module';
+
+import { ModalPageToPresent } from './modal-page-to-present';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+    ModalRoutingModule
+  ],
+  declarations: [
+    ModalPageComponent,
+    ModalPageToPresent
+  ],
+  providers: [
+  ],
+  entryComponents: [
+    ModalPageToPresent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ModalModule { }
--- a/angular/test/nav/src/app/no-routing-nav/no-routing-nav-routing.module.ts
+++ b/angular/test/nav/src/app/no-routing-nav/no-routing-nav-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NoRoutingNavPageComponent } from './no-routing-nav.component';
+
+const routes: Routes = [
+  { path: '', component: NoRoutingNavPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NoRoutingNavRoutingModule { }
--- a/angular/test/nav/src/app/no-routing-nav/no-routing-nav.component.ts
+++ b/angular/test/nav/src/app/no-routing-nav/no-routing-nav.component.ts
@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from './pages/page-one';
+
+@Component({
+  selector: 'app-nav-page',
+  template: `
+    <ion-app>
+      <ion-nav [root]="pageOne"></ion-nav>
+    </ion-app>
+  `
+})
+export class NoRoutingNavPageComponent {
+
+  pageOne: any = PageOne;
+  constructor() {
+
+  }
+
+}
--- a/angular/test/nav/src/app/no-routing-nav/no-routing-nav.module.ts
+++ b/angular/test/nav/src/app/no-routing-nav/no-routing-nav.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NoRoutingNavPageComponent } from './no-routing-nav.component';
+import { NoRoutingNavRoutingModule } from './no-routing-nav-routing.module';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { PageOne } from './pages/page-one';
+import { PageTwo } from './pages/page-two';
+import { PageThree } from './pages/page-three';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    NoRoutingNavRoutingModule,
+    IonicAngularModule,
+  ],
+  declarations: [
+    NoRoutingNavPageComponent,
+    PageOne,
+    PageTwo,
+    PageThree
+  ],
+  entryComponents: [
+    PageOne,
+    PageTwo,
+    PageThree
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class NoRoutingNavModule { }
--- a/angular/test/nav/src/app/no-routing-nav/pages/page-one.ts
+++ b/angular/test/nav/src/app/no-routing-nav/pages/page-one.ts
@@ -0,0 +1,62 @@
+import { Component } from '@angular/core';
+
+import { PageTwo } from './page-two';
+
+@Component({
+  selector: 'page-one',
+  template: `
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Page One</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    Page One
+    <div>
+      <ion-button (click)="goToPageTwo()">Go to Page Two</ion-button>
+    </div>
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+      <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+      <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+    </ul>
+  </ion-content>
+  `
+})
+export class PageOne {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page one ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page one ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page one ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goToPageTwo() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.push(PageTwo).then(() => console.log('push complete'));
+  }
+}
--- a/angular/test/nav/src/app/no-routing-nav/pages/page-three.ts
+++ b/angular/test/nav/src/app/no-routing-nav/pages/page-three.ts
@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-three',
+  template: `
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Three</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    Page Three
+    <div>
+    <ion-button (click)="goBack()">Go Back</ion-button>
+  </div>
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+      <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+      <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+    </ul>
+  </ion-content>
+  `
+})
+export class PageThree {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page two ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page two ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page two ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goBack() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.pop().then(() => console.log('pop complete'));
+  }
+}
--- a/angular/test/nav/src/app/no-routing-nav/pages/page-two.ts
+++ b/angular/test/nav/src/app/no-routing-nav/pages/page-two.ts
@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+
+import { PageThree } from './page-three';
+
+@Component({
+  selector: 'page-two',
+  template: `
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>Page Two</ion-title>
+    </ion-toolbar>
+  </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>
+    <ul>
+      <li>ngOnInit - {{ngOnInitDetection}}</li>
+      <li>ionViewWillEnter - {{ionViewWillEnterDetection}}</li>
+      <li>ionViewDidEnter - {{ionViewDidEnterDetection}}</li>
+    </ul>
+  </ion-content>
+  `
+})
+export class PageTwo {
+
+  ngOnInitDetection = 'initial';
+  ionViewWillEnterDetection = 'initial';
+  ionViewDidEnterDetection = 'initial';
+
+  constructor() {
+
+  }
+
+
+  ngOnInit() {
+    console.log('page two ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewWillEnter() {
+    console.log('page two ionViewWillEnter');
+    setInterval(() => {
+      this.ionViewWillEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  ionViewDidEnter() {
+    console.log('page two ionViewDidEnter');
+    setInterval(() => {
+      this.ionViewDidEnterDetection = '' + Date.now();
+    }, 500);
+  }
+
+  goNext() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.push(PageThree).then(() => console.log('push complete'));
+  }
+
+  goBack() {
+    const nav = document.querySelector('ion-nav') as any;
+    nav.pop().then(() => console.log('pop complete'));
+  }
+}
--- a/angular/test/nav/src/app/popover/popover-page-to-present.ts
+++ b/angular/test/nav/src/app/popover/popover-page-to-present.ts
@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+//  import { PopoverController } from '@ionic/angular';
+
+@Component({
+  selector: 'page-one',
+  template: `
+    <div style="height: 200px; background-color: blue">
+      {{ngOnInitDetection}}
+      <ion-button (click)="dismiss()">Close Popover</ion-button>
+    </div>
+  `
+})
+export class PopoverPageToPresent {
+
+  ngOnInitDetection = 'initial';
+
+  // constructor(private controller: PopoverController) { }
+
+
+  ngOnInit() {
+    console.log('page one ngOnInit');
+    setInterval(() => {
+      this.ngOnInitDetection = '' + Date.now();
+    }, 500);
+  }
+
+  dismiss() {
+    // return this.controller.
+  }
+}
--- a/angular/test/nav/src/app/popover/popover-page.component.ts
+++ b/angular/test/nav/src/app/popover/popover-page.component.ts
@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+
+import { PopoverController } from '@ionic/angular';
+import { PopoverPageToPresent } from './popover-page-to-present';
+
+@Component({
+  selector: 'app-popover-page',
+  template: `
+  <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Test</ion-title>
+          <ion-buttons slot="end">
+            <ion-button (click)="clickMe()">
+              No event passed
+            </ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <ion-button (click)="clickMe($event)">Open Basic Popover</ion-button>
+      </ion-content>
+</ion-app>
+  `
+})
+export class PopoverPageComponent {
+
+  constructor(private popoverController: PopoverController) {
+  }
+
+  async clickMe(event: Event) {
+    const popover = await this.popoverController.create({
+      component: PopoverPageToPresent,
+      ev: event
+    });
+    return popover.present();
+  }
+
+}
--- a/angular/test/nav/src/app/popover/popover-routing.module.ts
+++ b/angular/test/nav/src/app/popover/popover-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PopoverPageComponent } from './popover-page.component';
+
+const routes: Routes = [
+  { path: '', component: PopoverPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PopoverRoutingModule { }
--- a/angular/test/nav/src/app/popover/popover.module.ts
+++ b/angular/test/nav/src/app/popover/popover.module.ts
@@ -0,0 +1,27 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { PopoverPageComponent } from './popover-page.component';
+import { PopoverRoutingModule } from './popover-routing.module';
+
+import { PopoverPageToPresent } from './popover-page-to-present';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicAngularModule.forRoot(),
+    PopoverRoutingModule
+  ],
+  declarations: [
+    PopoverPageComponent,
+    PopoverPageToPresent
+  ],
+  providers: [
+  ],
+  entryComponents: [
+    PopoverPageToPresent
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PopoverModule { }
--- a/angular/test/nav/src/app/post-test/post-test.service.spec.ts
+++ b/angular/test/nav/src/app/post-test/post-test.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PostTestService } from './post-test.service';
+
+describe('PostTestService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PostTestService]
+    });
+  });
+
+  it('should be created', inject([PostTestService], (service: PostTestService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/angular/test/nav/src/app/post-test/post-test.service.ts
+++ b/angular/test/nav/src/app/post-test/post-test.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class PostTestService {
+  constructor(private http: HttpClient) { }
+
+  post(data: any): Observable<any> {
+    return this.http.post('http://localhost:5000/test', data);
+  }
+}
--- a/angular/test/nav/src/app/segment/segment-page.component.ts
+++ b/angular/test/nav/src/app/segment/segment-page.component.ts
@@ -0,0 +1,172 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-segment-page',
+  template: `
+  <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-segment id="segment" [(ngModel)]="relationship" (ionChange)="onSegmentChanged($event)">
+            <ion-segment-button value="friends" (ionSelect)="onSegmentSelected($event)" class="e2eSegmentFriends">
+              Friends
+            </ion-segment-button>
+            <ion-segment-button value="enemies" (ionSelect)="onSegmentSelected($event)">
+              Enemies
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-buttons slot="mode-end">
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+          <ion-segment [(ngModel)]="icons" color="secondary">
+            <ion-segment-button value="camera">
+              <ion-icon name="camera"></ion-icon>
+            </ion-segment-button>
+            <ion-segment-button value="bookmark">
+              <ion-icon name="bookmark"></ion-icon>
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content padding>
+        <h4>Model style: NgModel</h4>
+        <ion-segment [(ngModel)]="modelStyle" color="dark" [disabled]="isDisabledS">
+          <ion-segment-button value="A">
+            Model A
+          </ion-segment-button>
+          <ion-segment-button value="B">
+            Model B
+          </ion-segment-button>
+          <ion-segment-button value="C" class="e2eSegmentModelC">
+            Model C
+          </ion-segment-button>
+          <ion-segment-button value="D" [disabled]="isDisabledB">
+            Model D
+          </ion-segment-button>
+        </ion-segment>
+        <p>Model Style: <b>Model {{ modelStyle }}</b></p>
+        <ion-segment [(ngModel)]="icons">
+          <ion-segment-button value="camera">
+            <ion-icon name="camera"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="bookmark">
+            <ion-icon name="bookmark"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
+        <ion-button color="dark" (click)="toggleBDisabled()">Toggle Button Disabled</ion-button>
+        <ion-button color="dark" (click)="toggleSDisabled()">Toggle Segment Disabled</ion-button>
+
+        <ion-item>
+          <ion-label>Period Days</ion-label>
+          <ion-select [(ngModel)]="valve.periodDays" (ionChange)="periodDaysChange(valve)">
+            <ion-select-option value="1">1 Day</ion-select-option>
+            <ion-select-option value="2">2 Days</ion-select-option>
+            <ion-select-option value="3">3 Days</ion-select-option>
+            <ion-select-option value="4">4 Days</ion-select-option>
+            <ion-select-option value="5">5 Days</ion-select-option>
+            <ion-select-option value="6">6 Days</ion-select-option>
+            <ion-select-option value="7">7 Days</ion-select-option>
+          </ion-select>
+        </ion-item>
+        <ion-segment [(ngModel)]="valve.selectDay">
+          <ion-segment-button *ngFor="let info of valve.daysInfo" value="{{info.day}}">{{info.day+1}}th day</ion-segment-button>
+        </ion-segment>
+      </ion-content>
+
+      <ion-footer>
+        <ion-toolbar color="primary">
+          <ion-segment [(ngModel)]="appType" color="light">
+            <ion-segment-button value="paid">
+              Primary
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top" class="e2eSegmentTopGrossing">
+              Light Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="appType" color="danger">
+            <ion-segment-button value="paid">
+              Default
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top">
+              Danger Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-segment [(ngModel)]="appType" color="dark" [disabled]="isDisabledS">
+            <ion-segment-button value="paid">
+              Default
+            </ion-segment-button>
+            <ion-segment-button value="free">
+              Toolbar
+            </ion-segment-button>
+            <ion-segment-button value="top">
+              Dark Segment
+            </ion-segment-button>
+          </ion-segment>
+        </ion-toolbar>
+      </ion-footer>
+</ion-app>
+  `
+})
+export class SegmentPageComponent {
+  relationship: string = 'friends';
+  modelStyle: string = 'B';
+  appType: string = 'free';
+  icons: string = 'camera';
+  isDisabledB: boolean = true;
+  isDisabledS: boolean = false;
+
+  valve = {
+    daysInfo: [],
+    selectDay: '0',
+    periodDays: 3
+  }
+
+  constructor() {
+    this.periodDaysChange(this.valve);
+  }
+
+  periodDaysChange(valve) {
+    valve.periodDays = parseInt(valve.periodDays);
+    if (valve.daysInfo.length < valve.periodDays) {
+      for (let i = valve.daysInfo.length; i < valve.periodDays; ++i) {
+        valve.daysInfo.push({day:i, intervals:[]});
+      }
+    } else if (valve.daysInfo.length > valve.periodDays) {
+      valve.daysInfo = valve.daysInfo.slice(0, valve.periodDays);
+    }
+  }
+
+  addDays(valve) {
+    valve.periodDays += 1;
+    this.periodDaysChange(valve);
+  }
+
+  toggleBDisabled() {
+    this.isDisabledB = !this.isDisabledB;
+  }
+
+  toggleSDisabled() {
+    this.isDisabledS = !this.isDisabledS;
+  }
+
+  onSegmentChanged(segmentButton: any) {
+    console.log('Segment changed to', segmentButton.currentTarget.value);
+  }
+
+  onSegmentSelected(segmentButton: any) {
+    console.log('Segment selected', segmentButton.currentTarget.value);
+  }
+}
--- a/angular/test/nav/src/app/segment/segment-routing.module.ts
+++ b/angular/test/nav/src/app/segment/segment-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SegmentPageComponent } from './segment-page.component';
+
+const routes: Routes = [
+  { path: '', component: SegmentPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SegmentRoutingModule { }
--- a/angular/test/nav/src/app/segment/segment.module.ts
+++ b/angular/test/nav/src/app/segment/segment.module.ts
@@ -0,0 +1,19 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicAngularModule } from '@ionic/angular';
+
+import { SegmentPageComponent } from './segment-page.component';
+import { SegmentRoutingModule } from './segment-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SegmentRoutingModule,
+    IonicAngularModule
+  ],
+  declarations: [SegmentPageComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SegmentModule { }
--- a/angular/test/nav/src/app/show-hide-when/show-hide-when-page.component.ts
+++ b/angular/test/nav/src/app/show-hide-when/show-hide-when-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-show-hide-page',
+  templateUrl: './show-hide-when.html'
+})
+export class ShowHideWhenComponent {
+  constructor() {}
+}
--- a/angular/test/nav/src/app/show-hide-when/show-hide-when-routing.module.ts
+++ b/angular/test/nav/src/app/show-hide-when/show-hide-when-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ShowHideWhenComponent } from './show-hide-when-page.component';
+
+const routes: Routes = [
+  { path: '', component: ShowHideWhenComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ShowHideWhenRoutingModule { }
--- a/angular/test/nav/src/app/show-hide-when/show-hide-when.html
+++ b/angular/test/nav/src/app/show-hide-when/show-hide-when.html
@@ -0,0 +1,162 @@
+<ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+
+      <div>
+        <h2>Mode Tests</h2>
+        <ion-show-when mode="md, ios">
+          <div>Shows on MD, iOS</div>
+        </ion-show-when>
+
+        <ion-show-when mode="md">
+          <div>Shows on MD only</div>
+        </ion-show-when>
+
+        <ion-show-when mode="ios">
+          <div>Shows on iOS only</div>
+        </ion-show-when>
+
+        <ion-hide-when mode="md, ios">
+          <div>Hides on MD, iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="md">
+          <div>Hides on MD only</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="ios">
+          <div>Hides on iOS only</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Orientation Tests</h2>
+        <ion-show-when orientation="portrait">
+          <div>Shows on portrait orientation</div>
+        </ion-show-when>
+
+        <ion-show-when orientation="landscape">
+          <div>Shows on landscape orientation</div>
+        </ion-show-when>
+
+        <ion-hide-when orientation="portrait">
+          <div>Hides on portrait orientation</div>
+        </ion-hide-when>
+
+        <ion-hide-when orientation="landscape">
+          <div>Hides on landscape orientation</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Platform Tests</h2>
+
+        <ion-show-when platform="android,ios">
+          <div>Render on Android and iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ios">
+          <div>Only show on iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="android">
+          <div>Only show on Android</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ipad">
+          <div>Only show on ipad</div>
+        </ion-show-when>
+
+        <ion-show-when platform="phablet">
+          <div>Only show on phablet</div>
+        </ion-show-when>
+
+        <ion-show-when platform="iphone">
+          <div>Only show on phone</div>
+        </ion-show-when>
+
+        <ion-hide-when platform="android,ios">
+          <div>Hides on Android and iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ios">
+          <div>Only hide on iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="android">
+          <div>Only hide on Android</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ipad">
+          <div>Only hide on ipad</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="phablet">
+          <div>Only hide on phablet</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="iphone">
+          <div>Only hide on phone</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Size Tests</h2>
+        <ion-show-when size="xs">
+          <div>Only show on xs</div>
+        </ion-show-when>
+
+        <ion-show-when size="sm">
+          <div>Only show on sm</div>
+        </ion-show-when>
+
+        <ion-show-when size="md">
+          <div>Only show on md</div>
+        </ion-show-when>
+
+        <ion-show-when size="lg">
+          <div>Only show on lg</div>
+        </ion-show-when>
+
+        <ion-show-when size="xl">
+          <div>Only show on xl</div>
+        </ion-show-when>
+
+        <ion-show-when size="xs, m">
+          <div>Only show on XS or m</div>
+        </ion-show-when>
+
+        <ion-hide-when size="xs">
+          <div>Only hide on xs</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="sm">
+          <div>Only hide on sm</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="md">
+          <div>Only hide on md</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="lg">
+          <div>Only hide on lg</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xl">
+          <div>Only hide on xl</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xs, m">
+          <div>Only hide on XS or m</div>
+        </ion-hide-when>
+      </div>
+
+    </ion-content>
+</ion-app>
--- a/angular/test/nav/src/app/show-hide-when/show-hide-when.module.ts
+++ b/angular/test/nav/src/app/show-hide-when/show-hide-when.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ShowHideWhenComponent } from './show-hide-when-page.component';
+import { ShowHideWhenRoutingModule } from './show-hide-when-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ShowHideWhenRoutingModule
+  ],
+  declarations: [ShowHideWhenComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ShowHideWhenModule { }
--- a/angular/test/nav/src/app/simple-nav/page-one/page-one-routing.module.ts
+++ b/angular/test/nav/src/app/simple-nav/page-one/page-one-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { PageOne } from './page-one';
+
+const routes: Routes = [
+  { path: '', component: PageOne}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class PageOneRoutingModule { }
--- a/angular/test/nav/src/app/simple-nav/page-one/page-one.module.ts
+++ b/angular/test/nav/src/app/simple-nav/page-one/page-one.module.ts
@@ -0,0 +1,17 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PageOne } from './page-one';
+import { PageOneRoutingModule } from './page-one-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    PageOneRoutingModule
+  ],
+  declarations: [PageOne],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ]
+})
+export class PageOneModule { }
--- a/Show More
+++ b/Show More