chore(angular): update angular tests to ng v6 and latest stencil

angular/test/testapp/.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

angular/test/testapp/.gitignore

@@ -0,0 +1,39 @@
+# 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
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

angular/test/testapp/README.md

@@ -0,0 +1,27 @@
+# Testapp
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular/test/testapp/angular.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "testapp": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "prefix": "app",
+      "schematics": {},
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/testapp",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "testapp:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "testapp:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "testapp:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "karmaConfig": "src/karma.conf.js",
+            "styles": [
+              "styles.css"
+            ],
+            "scripts": [],
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "testapp-e2e": {
+      "root": "e2e/",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "testapp:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": "e2e/tsconfig.e2e.json",
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "testapp"
+}

angular/test/testapp/e2e/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: [
+    './src/**/*.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: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

angular/test/testapp/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to app!');
+  });
+});

angular/test/testapp/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

angular/test/testapp/e2e/tsconfig.e2e.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}

angular/test/testapp/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "testapp",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "npm run copy-ionic-angular && ng",
+    "serve": "npm run copy-ionic-angular && ng serve",
+    "serve.aot": "npm run copy-ionic-angular && ng serve --aot",
+    "build": "npm run copy-ionic-angular && ng build",
+    "build.aot": "npm run copy-ionic-angular && ng build --aot",
+    "build.prod": "npm run copy-ionic-angular && ng build --prod --aot",
+    "test": "npm run copy-ionic-angular && ng test",
+    "lint": "npm run copy-ionic-angular && ng lint",
+    "e2e": "npm run copy-ionic-angular && ng e2e",
+    "copy-ionic-angular": "node ../../scripts/link-copy.js ionic/angular/test/testapp"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^6.0.0",
+    "@angular/common": "^6.0.0",
+    "@angular/compiler": "^6.0.0",
+    "@angular/core": "^6.0.0",
+    "@angular/forms": "^6.0.0",
+    "@angular/http": "^6.0.0",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0",
+    "@angular/router": "^6.0.0",
+    "@ionic/angular": "^4.0.0-alpha.6",
+    "core-js": "^2.5.4",
+    "rxjs": "^6.0.0",
+    "zone.js": "^0.8.26"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^6.0.0",
+    "@angular-devkit/build-angular": "~0.6.0",
+    "typescript": "~2.7.2",
+    "@angular/cli": "~6.0.0",
+    "@angular/language-service": "^6.0.0",
+    "@types/jasmine": "~2.8.6",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
+    "codelyzer": "~4.2.1",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~1.7.1",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.3.0",
+    "ts-node": "~5.0.1",
+    "tslint": "~5.9.1"
+  }
+}

angular/test/testapp/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>Action Sheet</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({
+      header: '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();
+  }
+
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/action-sheet/action-sheet.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { ActionSheetPageComponent } from './action-sheet-page.component';
+import { ActionSheetRoutingModule } from './action-sheet-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ActionSheetRoutingModule
+  ],
+  declarations: [ActionSheetPageComponent]
+})
+export class ActionSheetModule { }

angular/test/testapp/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>Alert</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({
+      header: '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();
+  }
+
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/alert/alert.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { AlertPageComponent } from './alert-page.component';
+import { AlertRoutingModule } from './alert-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    AlertRoutingModule
+  ],
+  declarations: [AlertPageComponent]
+})
+export class AlertModule { }

angular/test/testapp/src/app/app-routing.module.ts

@@ -0,0 +1,35 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/home', pathMatch: 'full' },
+  { path: 'basic-inputs', loadChildren: './basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
+  { path: 'show-hide-when', loadChildren: './show-hide-when/show-hide-when.module#ShowHideWhenModule' },
+  { path: 'form-sample', loadChildren: './form-sample-page/form-sample-page.module#FormSamplePageModule' },
+  { path: 'group-inputs', loadChildren: './group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
+  { path: 'home', loadChildren: './home-page/home-page.module#HomePageModule' },
+  { path: 'alert', loadChildren: './alert/alert.module#AlertModule' },
+  { path: 'actionSheet', loadChildren: './action-sheet/action-sheet.module#ActionSheetModule' },
+  { path: 'badge', loadChildren: './badge/badge.module#BadgeModule' },
+  { path: 'card', loadChildren: './card/card.module#CardModule' },
+  { path: 'content', loadChildren: './content/content.module#ContentModule' },
+  { path: 'toast', loadChildren: './toast/toast.module#ToastModule' },
+  { path: 'loading', loadChildren: './loading/loading.module#LoadingModule' },
+  { path: 'modal', loadChildren: './modal/modal.module#ModalModule' },
+  { path: 'ng-if', loadChildren: './ng-if/ng-if.module#NgIfModule' },
+  { path: 'popover', loadChildren: './popover/popover.module#PopoverModule' },
+  { path: 'segment', loadChildren: './segment/segment.module#SegmentModule' },
+  { path: 'virtual-scroll', loadChildren: './virtual-scroll/virtual-scroll.module#VirtualScrollModule' },
+
+  { path: 'no-routing-nav', loadChildren: './no-routing-nav/no-routing-nav.module#NoRoutingNavModule' },
+  { path: 'simple-nav', loadChildren: './simple-nav/simple-nav.module#SimpleNavModule' },
+  { path: 'lazy-load-tabs', loadChildren: './lazy-load-tabs/tabs.module#TabsModule' },
+  { path: 'simple-tabs', loadChildren: './simple-tabs/tabs.module#TabsModule' },
+  { path: 'static-tabs', loadChildren: './static-tabs/tabs.module#TabsModule' },
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

angular/test/testapp/src/app/app.component.html

@@ -0,0 +1,2 @@
+
+<router-outlet></router-outlet>

angular/test/testapp/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();
+    })
+  );
+});

angular/test/testapp/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';
+}

angular/test/testapp/src/app/app.module.ts

@@ -0,0 +1,22 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { 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 { IonicModule } from '@ionic/angular';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    AppRoutingModule,
+    BrowserModule,
+    HttpClientModule,
+    IonicModule.forRoot(),
+  ],
+  bootstrap: [AppComponent],
+  providers: [PostTestService]
+})
+export class AppModule { }

angular/test/testapp/src/app/badge/badge-page.component.ts

@@ -0,0 +1,95 @@
+import { Component, ViewChild } from '@angular/core';
+import { Badge } from '@ionic/angular';
+
+@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';
+
+  @ViewChild(Badge) badge: Badge;
+
+  ngOnInit() {
+    console.log(this.badge);
+  }
+
+  toggleColor() {
+    if (this.dynamicColor === 'primary') {
+      this.dynamicColor = 'secondary';
+    } else if (this.dynamicColor === 'secondary') {
+      this.dynamicColor = 'danger';
+    } else {
+      this.dynamicColor = 'primary';
+    }
+  }
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/badge/badge.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { BadgePageComponent } from './badge-page.component';
+import { BadgeRoutingModule } from './badge-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BadgeRoutingModule,
+    IonicModule
+  ],
+  declarations: [BadgePageComponent]
+})
+export class BadgeModule { }

angular/test/testapp/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 { }

angular/test/testapp/src/app/basic-inputs-page/basic-inputs-page.component.html

@@ -0,0 +1,275 @@
+<ion-app>
+
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Basic Inputs</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <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>
+
+  </ion-content>
+
+  <ion-footer>
+    <ion-toolbar>
+      <a href='home'>Home</a>
+    </ion-toolbar>
+  </ion-footer>
+
+</ion-app>

angular/test/testapp/src/app/basic-inputs-page/basic-inputs-page.component.spec.ts

@@ -0,0 +1,56 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { IonicModule } 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,
+          IonicModule.forRoot()
+        ],
+      }).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');
+    });
+  });
+});

angular/test/testapp/src/app/basic-inputs-page/basic-inputs-page.component.ts

@@ -0,0 +1,27 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-basic-inputs-page',
+  templateUrl: './basic-inputs-page.component.html',
+  encapsulation: ViewEncapsulation.None
+})
+export class BasicInputsPageComponent {
+  disableInputs = false;
+
+  datetimeValue = '2017-11-18T14:17:45-06:00';
+  textareaValue = 'This is the Textarea Input';
+  textValue = 'This is the Text Input';
+  numericValue = 1138;
+  selectValue = 'pineapple';
+
+  checkboxValue = true;
+  toggleValue = false;
+
+  rangeValue = 15;
+
+  searchValue: string;
+
+  typeOf(v: any): string {
+    return typeof v;
+  }
+}

angular/test/testapp/src/app/basic-inputs-page/basic-inputs-page.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { BasicInputsPageComponent } from './basic-inputs-page.component';
+import { BasicInputsPageRoutingModule } from './basic-inputs-page-routing.module';
+
+@NgModule({
+  imports: [
+    BasicInputsPageRoutingModule,
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ],
+  declarations: [BasicInputsPageComponent]
+})
+export class BasicInputsPageModule {}

angular/test/testapp/src/app/card/card-page.component.ts

@@ -0,0 +1,90 @@
+import { Component } from '@angular/core';
+import { DomController } from '@ionic/angular';
+
+@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(public domCtrl: DomController) {
+    this.domControllerTest('constructor');
+  }
+
+  ngOnInit() {
+    this.domControllerTest('ngOnInit');
+
+    setTimeout(() => {
+      this.domControllerTest('setTimeout');
+    }, 5000);
+  }
+
+  domControllerTest(test: string) {
+    this.domCtrl.read(readTimeStamp => {
+      console.log('DomController read:', test, readTimeStamp);
+
+      this.domCtrl.write(writeTimeStamp => {
+        console.log('DomController write:', test, writeTimeStamp);
+      });
+    });
+  }
+
+  toggleColor() {
+
+  }
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/card/card.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule, DomController } from '@ionic/angular';
+import { CardPageComponent } from './card-page.component';
+import { CardRoutingModule } from './card-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    CardRoutingModule
+  ],
+  declarations: [
+    CardPageComponent
+  ],
+  providers: [
+    DomController
+  ]
+})
+export class CardModule { }

angular/test/testapp/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;
+  }
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/content/content.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { ContentPageComponent } from './content-page.component';
+import { ContentRoutingModule } from './content-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ContentRoutingModule
+  ],
+  declarations: [ContentPageComponent]
+})
+export class ContentModule { }

angular/test/testapp/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 { }

angular/test/testapp/src/app/form-sample-page/form-sample-page.component.html

@@ -0,0 +1,88 @@
+<ion-app>
+  <form #myForm="ngForm" class="ion-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Sample Form</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      <ion-list>
+        <ion-item>
+          <ion-label position="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 position="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-item-divider>
+          <ion-label>I Would Like To:</ion-label>
+        </ion-item-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 position="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 position="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-item-divider>
+          <ion-label>My Level of Happy</ion-label>
+        </ion-item-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>

angular/test/testapp/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();
+  });
+});

angular/test/testapp/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']);
+  }
+}

angular/test/testapp/src/app/form-sample-page/form-sample-page.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+
+import { FormSamplePageComponent } from './form-sample-page.component';
+import { FormSamplePageRoutingModule } from './form-sample-page-routing.module';
+
+@NgModule({
+  imports: [
+    FormSamplePageRoutingModule,
+    CommonModule,
+    FormsModule,
+    IonicModule
+  ],
+  declarations: [FormSamplePageComponent]
+})
+export class FormSamplePageModule {}

angular/test/testapp/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 { }

angular/test/testapp/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>

angular/test/testapp/src/app/group-inputs-page/group-inputs-page.component.spec.ts

@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } 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,
+          IonicModule
+        ],
+        declarations: [GroupInputsPageComponent]
+      }).compileComponents();
+    })
+  );
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GroupInputsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/test/testapp/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() {}
+}

angular/test/testapp/src/app/group-inputs-page/group-inputs-page.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { GroupInputsPageComponent } from './group-inputs-page.component';
+import { GroupInputsPageRoutingModule } from './group-inputs-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    GroupInputsPageRoutingModule,
+    IonicModule
+  ],
+  declarations: [GroupInputsPageComponent]
+})
+export class GroupInputsPageModule {}

angular/test/testapp/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 { }

angular/test/testapp/src/app/home-page/home-page.component.html

@@ -0,0 +1,106 @@
+
+<h1>@ionic/angular tests</h1>
+
+<h3>Overlays</h3>
+<ul>
+  <li>
+    <a [routerLink]="['/actionSheet']">Action Sheet Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/alert']">Alert 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]="['/toast']">Toast Page</a>
+  </li>
+</ul>
+
+
+<h3>Inputs</h3>
+<ul>
+  <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]="['/segment']">Segment Page</a>
+  </li>
+</ul>
+
+
+<h3>Navigation</h3>
+<ul>
+  <li>
+    <a href="no-routing-nav">No Routing</a>
+  </li>
+  <li>
+    <a href="simple-nav/page-one">Simple Nav</a>
+  </li>
+  <li>
+    <a href="lazy-load-tabs">Lazy Loaded Route Tabs</a>
+    <ul>
+      <li>
+        <a [routerLink]="['/lazy-load-tabs', 'tabs', { outlets: { tab1: ['mustang'] } }]">Tab 1</a>
+      </li>
+      <li>
+        <a [routerLink]="['/lazy-load-tabs', 'tabs', { outlets: { tab2: ['camaro'] } }]">Tab 2</a>
+      </li>
+      <li>
+        <a [routerLink]="['/lazy-load-tabs', 'tabs', { outlets: { tab3: ['charger'] } }]">Tab 3</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="simple-tabs">Simple Route Tabs</a>
+    <ul>
+      <li>
+        <a [routerLink]="['/simple-tabs', 'tabs', { outlets: { tab1: ['mustang'] } }]">Tab 1</a>
+      </li>
+      <li>
+        <a [routerLink]="['/simple-tabs', 'tabs', { outlets: { tab2: ['camaro'] } }]">Tab 2</a>
+      </li>
+      <li>
+        <a [routerLink]="['/simple-tabs', 'tabs', { outlets: { tab3: ['charger'] } }]">Tab 3</a>
+      </li>
+    </ul>
+  </li>
+  <li>
+    <a href="static-tabs">Static Tabs</a>
+  </li>
+</ul>
+
+
+<h3>Content</h3>
+<ul>
+  <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]="['/ng-if']">ngIf Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/show-hide-when']">Show/Hide When Page</a>
+  </li>
+  <li>
+    <a [routerLink]="['/virtual-scroll']">Virtual Scroll Page</a>
+  </li>
+</ul>

angular/test/testapp/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();
+  });
+});

angular/test/testapp/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() { }
+
+}

angular/test/testapp/src/app/home-page/home-page.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { HomePageComponent } from './home-page.component';
+import { HomePageRoutingModule } from './home-page-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HomePageRoutingModule,
+    IonicModule
+  ],
+  declarations: [HomePageComponent]
+})
+export class HomePageModule { }

angular/test/testapp/src/app/lazy-load-tabs/camaro/camaro-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { CamaroPage } from './camaro.page';
+
+const routes: Routes = [
+  { path: '', component: CamaroPage, outlet: 'tab2' }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
+})
+export class CamaroPageRoutingModule { }

angular/test/testapp/src/app/lazy-load-tabs/camaro/camaro.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { CamaroPage } from './camaro.page';
+import { CamaroPageRoutingModule } from './camaro-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    CamaroPageRoutingModule
+  ],
+  declarations: [
+    CamaroPage
+  ]
+})
+export class CamaroModule {}

angular/test/testapp/src/app/lazy-load-tabs/camaro/camaro.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'camaro-page',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Camaro</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Camaro
+    </ion-content>
+  `
+})
+export class CamaroPage {}

angular/test/testapp/src/app/lazy-load-tabs/charger/charger-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { ChargerPage } from './charger.page';
+
+const routes: Routes = [
+  { path: '', component: ChargerPage, outlet: 'tab3' }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
+})
+export class ChargerPageRoutingModule { }

angular/test/testapp/src/app/lazy-load-tabs/charger/charger.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { ChargerPage } from './charger.page';
+import { ChargerPageRoutingModule } from './charger-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ChargerPageRoutingModule
+  ],
+  declarations: [
+    ChargerPage
+  ]
+})
+export class ChargerModule {}

angular/test/testapp/src/app/lazy-load-tabs/charger/charger.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'charger-page',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Charger</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Charger
+    </ion-content>
+  `
+})
+export class ChargerPage {}

angular/test/testapp/src/app/lazy-load-tabs/mustang/mustang-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { MustangPage } from './mustang.page';
+
+const routes: Routes = [
+  { path: '', component: MustangPage, outlet: 'tab1' }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
+})
+export class MustangPageRoutingModule { }

angular/test/testapp/src/app/lazy-load-tabs/mustang/mustang.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { MustangPage } from './mustang.page';
+import { MustangPageRoutingModule } from './mustang-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    MustangPageRoutingModule
+  ],
+  declarations: [
+    MustangPage
+  ]
+})
+export class MustangModule {}

angular/test/testapp/src/app/lazy-load-tabs/mustang/mustang.page.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'mustang-page',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Mustang</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Mustang
+    </ion-content>
+  `
+})
+export class MustangPage {}

angular/test/testapp/src/app/lazy-load-tabs/tabs-routing.module.ts

@@ -0,0 +1,44 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { TabsPageComponent } from './tabs.component';
+
+const routes: Routes = [
+  {
+    path: 'tabs',
+    component: TabsPageComponent,
+    children: [
+      {
+        path: 'mustang',
+        outlet: 'tab1',
+        loadChildren: './mustang/mustang.module#MustangModule'
+      },
+      {
+        path: 'camaro',
+        outlet: 'tab2',
+        loadChildren: './camaro/camaro.module#CamaroModule'
+      },
+      {
+        path: 'charger',
+        outlet: 'tab3',
+        loadChildren: './charger/charger.module#ChargerModule'
+      }
+    ]
+  },
+  {
+    path: '',
+    redirectTo: '/lazy-load-tabs/tabs/(tab1:mustang)'
+  }
+];
+
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class TabsRoutingModule { }

angular/test/testapp/src/app/lazy-load-tabs/tabs.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'tabs-root',
+  templateUrl: 'tabs.html'
+})
+export class TabsPageComponent {}

angular/test/testapp/src/app/lazy-load-tabs/tabs.html

@@ -0,0 +1,19 @@
+<ion-app>
+
+  <ion-tabs>
+
+    <ion-tab label="Tab 1" icon="home" href="/lazy-load-tabs/tabs/(tab1:mustang)">
+      <ion-router-outlet name="tab1"></ion-router-outlet>
+    </ion-tab>
+
+    <ion-tab label="Tab 2" icon="heart" href="/lazy-load-tabs/tabs/(tab2:camaro)">
+      <ion-router-outlet name="tab2"></ion-router-outlet>
+    </ion-tab>
+
+    <ion-tab label="Tab 3" icon="star" href="/lazy-load-tabs/tabs/(tab3:charger)">
+      <ion-router-outlet name="tab3"></ion-router-outlet>
+    </ion-tab>
+
+  </ion-tabs>
+
+</ion-app>

angular/test/testapp/src/app/lazy-load-tabs/tabs.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { TabsPageComponent } from './tabs.component';
+import { TabsRoutingModule } from './tabs-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TabsRoutingModule,
+  ],
+  declarations: [
+    TabsPageComponent,
+  ]
+})
+export class TabsModule {}

angular/test/testapp/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>Loading</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();
+  }
+
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/loading/loading.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { LoadingPageComponent } from './loading-page.component';
+import { LoadingRoutingModule } from './loading-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    LoadingRoutingModule
+  ],
+  declarations: [LoadingPageComponent]
+})
+export class LoadingModule { }

angular/test/testapp/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();
+  }
+}

angular/test/testapp/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>Modal</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();
+  }
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/modal/modal.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } 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,
+    IonicModule.forRoot(),
+    ModalRoutingModule
+  ],
+  declarations: [
+    ModalPageComponent,
+    ModalPageToPresent
+  ],
+  entryComponents: [
+    ModalPageToPresent
+  ]
+})
+export class ModalModule { }

angular/test/testapp/src/app/ng-if/ng-if-page.component.ts

@@ -0,0 +1,42 @@
+import { Component, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ng-if-page',
+  template: `
+  <ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>ngIf</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <p padding>Value should stay the same after ngIf removes the component from the DOM then adds it back in.</p>
+      <ion-list>
+        <ion-item>
+          <ion-label>Value: {{value}}</ion-label>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input value="{{value}}"></ion-input>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input [value]="value"></ion-input>
+        </ion-item>
+        <ion-item *ngIf="show">
+          <ion-input [(ngModel)]="value"></ion-input>
+        </ion-item>
+      </ion-list>
+      <ion-button (click)="toggle()">ngIf {{ show ? 'hide' : 'show'}}</ion-button>
+    </ion-content>
+  </ion-app>
+  `
+})
+export class NgIfPageComponent {
+
+  value = Math.round(Math.random() * 10000000);
+  show = true;
+
+  toggle() {
+    this.show = !this.show;
+  }
+
+}

angular/test/testapp/src/app/ng-if/ng-if-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { NgIfPageComponent } from './ng-if-page.component';
+
+const routes: Routes = [
+  { path: '', component: NgIfPageComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class NgIfRoutingModule { }

angular/test/testapp/src/app/ng-if/ng-if.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+import { NgIfPageComponent } from './ng-if-page.component';
+import { NgIfRoutingModule } from './ng-if-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgIfRoutingModule,
+    IonicModule
+  ],
+  declarations: [NgIfPageComponent]
+})
+export class NgIfModule { }

angular/test/testapp/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 { }

angular/test/testapp/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() {
+
+  }
+
+}

angular/test/testapp/src/app/no-routing-nav/no-routing-nav.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { NoRoutingNavPageComponent } from './no-routing-nav.component';
+import { NoRoutingNavRoutingModule } from './no-routing-nav-routing.module';
+
+import { PageOne } from './pages/page-one';
+import { PageTwo } from './pages/page-two';
+import { PageThree } from './pages/page-three';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    NoRoutingNavRoutingModule,
+    IonicModule,
+  ],
+  declarations: [
+    NoRoutingNavPageComponent,
+    PageOne,
+    PageTwo,
+    PageThree
+  ],
+  entryComponents: [
+    PageOne,
+    PageTwo,
+    PageThree
+  ]
+})
+export class NoRoutingNavModule { }

angular/test/testapp/src/app/no-routing-nav/pages/page-one.ts

@@ -0,0 +1,60 @@
+import { Component } from '@angular/core';
+
+import { PageTwo } from './page-two';
+import { Nav } 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
+    <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(private nav: Nav) {}
+
+
+  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);
+  }
+
+  async goToPageTwo() {
+    await this.nav.push(PageTwo);
+  }
+}

angular/test/testapp/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'));
+  }
+}

angular/test/testapp/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'));
+  }
+}

angular/test/testapp/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.
+  }
+}

angular/test/testapp/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>Popover</ion-title>
+          <ion-buttons slot="primary">
+            <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();
+  }
+
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/popover/popover.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } 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,
+    IonicModule.forRoot(),
+    PopoverRoutingModule
+  ],
+  declarations: [
+    PopoverPageComponent,
+    PopoverPageToPresent
+  ],
+  providers: [
+  ],
+  entryComponents: [
+    PopoverPageToPresent
+  ]
+})
+export class PopoverModule { }

angular/test/testapp/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();
+  }));
+});

angular/test/testapp/src/app/post-test/post-test.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable()
+export class PostTestService {
+  constructor(private http: HttpClient) { }
+
+  post(data: any) {
+    return this.http.post('http://localhost:5000/test', data);
+  }
+}

angular/test/testapp/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);
+  }
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/segment/segment.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+import { SegmentPageComponent } from './segment-page.component';
+import { SegmentRoutingModule } from './segment-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    SegmentRoutingModule,
+    IonicModule
+  ],
+  declarations: [SegmentPageComponent]
+})
+export class SegmentModule { }

angular/test/testapp/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() {}
+}

angular/test/testapp/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 { }

angular/test/testapp/src/app/show-hide-when/show-hide-when.html

@@ -0,0 +1,162 @@
+<ion-app>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Show/Hide When</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>

angular/test/testapp/src/app/show-hide-when/show-hide-when.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { IonicModule } from '@ionic/angular';
+import { ShowHideWhenComponent } from './show-hide-when-page.component';
+import { ShowHideWhenRoutingModule } from './show-hide-when-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ShowHideWhenRoutingModule
+  ],
+  declarations: [ShowHideWhenComponent]
+})
+export class ShowHideWhenModule { }

angular/test/testapp/src/app/simple-nav/page-one/page-one-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { PageOne } from './page-one';
+
+const routes: Routes = [
+  { path: '', component: PageOne}
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
+})
+export class PageOneRoutingModule { }

angular/test/testapp/src/app/simple-nav/page-one/page-one.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } 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]
+})
+export class PageOneModule { }

angular/test/testapp/src/app/simple-nav/page-one/page-one.ts

@@ -0,0 +1,36 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { PageTwo } from '../page-two/page-two';
+
+@Component({
+  selector: 'page-one',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Simple Page One</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+      Page One - {{ts}}
+      <div>
+        <ion-button [routerLink]="['/simple-nav/page-two']">Go to Page Two</ion-button>
+
+        <ion-button routerLink="/simple-nav/page-two" routerDirection="forward">FORWARD (Page Two)</ion-button>
+        <ion-button routerLink="/simple-nav/page-two" routerDirection="back">BACK (Page Two)</ion-button>
+        <ion-button routerLink="/simple-nav/page-two" routerDirection="root">ROOT (Page Two)</ion-button>
+
+      </div>
+    </ion-content>
+  `
+})
+export class PageOne {
+
+  ts: number;
+  constructor() {
+    setInterval(() => {
+      this.ts = Date.now();
+    }, 500);
+  }
+}

angular/test/testapp/src/app/simple-nav/page-three/page-three-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+import { PageThree } from './page-three';
+
+const routes: Routes = [
+  { path: '', component: PageThree }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes), IonicModule],
+  exports: [RouterModule, IonicModule]
+})
+export class PageThreeRoutingModule { }