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

angular/package.json

@@ -21,25 +21,27 @@
   },
   "scripts": {
     "build": "npm run clean && npm run compile && npm run clean-generated && npm run ionic-core",
+    "build.dev": "npm run clean && npm run compile && npm run clean-generated && npm run ionic-core-dev",
     "build.link": "npm run build && node scripts/link-copy.js",
     "clean": "node scripts/clean.js",
     "clean-generated": "node ./scripts/clean-generated.js",
     "compile": "./node_modules/.bin/ngc",
-    "ionic-core": "node ../core/node_modules/.bin/stencil build",
+    "ionic-core": "stencil build",
-    "ionic-core-dev": "node ../core/node_modules/.bin/stencil build --dev",
+    "ionic-core-dev": "stencil build --dev",
     "lint": "tslint --project .",
     "prerelease": "npm run validate && np prerelease --yolo --any-branch --tag next",
     "test": "echo 'angular no tests yet'",
     "tsc": "tsc -p .",
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
-  "main": "./dist/index.js",
+  "main": "dist/index.js",
-  "types": "./dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist/"
   ],
   "dependencies": {
-    "@ionic/core": "4.0.0-alpha.6"
+    "@ionic/core": "4.0.0-alpha.6",
+    "@stencil/core": "^0.9.1"
   },
   "devDependencies": {
     "@angular/common": "^6.0.0",

angular/scripts/link-copy.js

@@ -7,25 +7,34 @@ if (!prjDir) {
   throw new Error('local path required as last argument to "npm run build.link" command');
 }
 prjDir = path.join(__dirname, '../../../', prjDir);
-const prjIonicAngular = path.join(prjDir, 'node_modules/@ionic/angular');
 
-const ionicAngularDir = path.join(__dirname, '..');
+copyPackage(prjDir, 'angular');
-const ionicAngularDist = path.join(ionicAngularDir, 'dist');
+copyPackage(prjDir, 'core');
-const ionicAngularPkgJsonPath = path.join(ionicAngularDir, 'package.json');
-const ionicAngularPkgJson = require(ionicAngularPkgJsonPath);
 
-// make sure this local project exists
-fs.emptyDirSync(prjIonicAngular);
 
-ionicAngularPkgJson.files.push('package.json');
+function copyPackage(prjDir, pkgName) {
+  const prjDest = path.join(prjDir, 'node_modules', '@ionic', pkgName);
 
-ionicAngularPkgJson.files.forEach(f => {
+  const pkgSrcDir = path.join(__dirname, '..', '..', pkgName);
-  const src = path.join(ionicAngularDir, f);
+  const pkgSrcDist = path.join(pkgSrcDir, 'dist');
-  const dest = path.join(prjIonicAngular, f);
+  const pkgJsonPath = path.join(pkgSrcDir, 'package.json');
+  const pkgJson = require(pkgJsonPath);
 
-  console.log('copying:', src, 'to', dest);
+  // make sure this local project exists
-  fs.copySync(src, dest);
+  fs.emptyDirSync(prjDest);
-});
 
-const prjReadme = path.join(prjIonicAngular, 'README.md');
+  pkgJson.files.push('package.json');
-fs.writeFileSync(prjReadme, '@ionic/angular copied from ' + ionicAngularDir);
+
+  pkgJson.files.forEach(f => {
+    const src = path.join(pkgSrcDir, f);
+    const dest = path.join(prjDest, f);
+
+    console.log('copying:', src, 'to', dest);
+    fs.copySync(src, dest);
+  });
+
+  const prjReadme = path.join(prjDest, 'README.md');
+  console.log('readme:', prjReadme);
+
+  fs.writeFileSync(prjReadme, '@ionic/' + pkgName + ' copied from ' + pkgSrcDir + ', ' + new Date());
+}

angular/src/app-initialize.ts

@@ -0,0 +1,42 @@
+import { Config } from './providers/config';
+import { defineCustomElements } from '@ionic/core';
+import { IonicWindow } from './types/interfaces';
+
+
+export function appInitialize(config: Config) {
+  return () => {
+    const win: IonicWindow = window as any;
+    if (typeof win !== 'undefined') {
+      const Ionic = win.Ionic = win.Ionic || {};
+
+      Ionic.config = config;
+
+      Ionic.ael = (elm, eventName, cb, opts) => {
+        if (elm.__zone_symbol__addEventListener) {
+          elm.__zone_symbol__addEventListener(eventName, cb, opts);
+        } else {
+          elm.addEventListener(eventName, cb, opts);
+        }
+      };
+
+      Ionic.rel = (elm, eventName, cb, opts) => {
+        if (elm.__zone_symbol__removeEventListener) {
+          elm.__zone_symbol__removeEventListener(eventName, cb, opts);
+        } else {
+          elm.removeEventListener(eventName, cb, opts);
+        }
+      };
+
+      Ionic.raf = (cb: any) => {
+        if (win.__zone_symbol__requestAnimationFrame) {
+          win.__zone_symbol__requestAnimationFrame(cb);
+        } else {
+          win.requestAnimationFrame(cb);
+        }
+      };
+
+      // define all of Ionic's custom elements
+      defineCustomElements(win);
+    }
+  };
+}

angular/src/directives/proxies-list.txt

@@ -26,6 +26,7 @@ export const DIRECTIVES = [
   d.Grid,
   d.Header,
   d.HideWhen,
+  d.Img,
   d.InfiniteScroll,
   d.InfiniteScrollContent,
   d.Input,

angular/src/directives/virtual-scroll/virtual-scroll.ts

@@ -1,11 +1,22 @@
 import { ChangeDetectorRef, ContentChild, Directive, ElementRef, EmbeddedViewRef } from '@angular/core';
+import { proxyInputs } from '../proxies';
 import { VirtualItem } from './virtual-item';
 import { VirtualHeader } from './virtual-header';
 import { VirtualFooter } from './virtual-footer';
 import { VirtualContext } from './virtual-utils';
 
+
 @Directive({
-  selector: 'ion-virtual-scroll'
+  selector: 'ion-virtual-scroll',
+  inputs: [
+    'approxItemHeight',
+    'approxHeaderHeight',
+    'approxFooterHeight',
+    'headerFn',
+    'footerFn',
+    'items',
+    'itemHeight'
+  ]
 })
 export class VirtualScroll {
 
@@ -17,7 +28,17 @@ export class VirtualScroll {
     private el: ElementRef,
     public cd: ChangeDetectorRef,
   ) {
-    this.el.nativeElement.nodeRender = this.nodeRender.bind(this);
+    el.nativeElement.nodeRender = this.nodeRender.bind(this);
+
+    proxyInputs(this, this.el, [
+      'approxItemHeight',
+      'approxHeaderHeight',
+      'approxFooterHeight',
+      'headerFn',
+      'footerFn',
+      'items',
+      'itemHeight'
+    ]);
   }
 
   private nodeRender(el: HTMLElement|null, cell: any, index?: number) {

angular/src/index.ts

@@ -1,5 +1,5 @@
 // export module
-export { IonicModule } from './module';
+export { IonicModule } from './ionic-module';
 
 // export auto generated directive
 export * from './directives/proxies';
@@ -15,6 +15,3 @@ export * from './types/interfaces';
 
 // ionic oute reuse strategy
 export * from './util/ionic-router-reuse-strategy';
-
-/*tslint:disable*/
-import './ionic-angular';

angular/src/ionic-angular.ts

@@ -1,32 +0,0 @@
-/*tslint:disable*/
-import './ionic';
-import { IonicWindow } from './types/interfaces';
-
-const win = (window as IonicWindow);
-const Ionic = win.Ionic;
-
-if (Ionic) {
-  Ionic.ael = function ngAddEventListener(elm, eventName, cb, opts) {
-    if (elm.__zone_symbol__addEventListener) {
-      elm.__zone_symbol__addEventListener(eventName, cb, opts);
-    } else {
-      elm.addEventListener(eventName, cb, opts);
-    }
-  };
-
-  Ionic.rel = function ngRemoveEventListener(elm, eventName, cb, opts) {
-    if (elm.__zone_symbol__removeEventListener) {
-      elm.__zone_symbol__removeEventListener(eventName, cb, opts);
-    } else {
-      elm.removeEventListener(eventName, cb, opts);
-    }
-  };
-
-  Ionic.raf = function ngRequestAnimationFrame(cb: any) {
-    if (win.__zone_symbol__requestAnimationFrame) {
-      win.__zone_symbol__requestAnimationFrame(cb);
-    } else {
-      win.requestAnimationFrame(cb);
-    }
-  };
-}

angular/src/ionic-module.ts

@@ -1,10 +1,13 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
+import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+import { appInitialize } from './app-initialize';
+import { ConfigToken } from './providers/config';
 import * as c from './directives';
 import * as d from './directives/proxies';
 import * as p from './providers';
 
+
 const DECLARATIONS = [
   // proxies
   d.App,
@@ -31,6 +34,7 @@ const DECLARATIONS = [
   d.Grid,
   d.Header,
   d.HideWhen,
+  d.Img,
   d.InfiniteScroll,
   d.InfiniteScrollContent,
   d.Input,
@@ -111,6 +115,7 @@ const DECLARATIONS = [
 const PROVIDERS = [
   p.ActionSheetController,
   p.AlertController,
+  p.Config,
   p.LoadingController,
   p.PickerController,
   p.ToastController,
@@ -121,6 +126,7 @@ const PROVIDERS = [
   p.DomController
 ];
 
+
 @NgModule({
   declarations: DECLARATIONS,
   exports: DECLARATIONS,
@@ -128,11 +134,23 @@ const PROVIDERS = [
   imports: [CommonModule]
 })
 export class IonicModule {
-  static forRoot(_config?: { [key: string]: any }): ModuleWithProviders {
+  static forRoot(config?: { [key: string]: any }): ModuleWithProviders {
     return {
       ngModule: IonicModule,
       providers: [
-        ...PROVIDERS,
+        {
+          provide: ConfigToken,
+          useValue: config
+        },
+        {
+          provide: APP_INITIALIZER,
+          useFactory: appInitialize,
+          multi: true,
+          deps: [
+            ConfigToken
+          ]
+        },
+        ...PROVIDERS
       ]
     };
   }

angular/src/ionic.ts

@@ -1,3 +0,0 @@
-
-// placeholder for ionic loader js
-// created by the stencil build process

angular/src/providers/config.ts

@@ -1,31 +1,51 @@
 import { Config as CoreConfig } from '@ionic/core';
 import { InjectionToken } from '@angular/core';
+import { IonicWindow } from '../types/interfaces';
+
 
 export class Config {
 
   get(key: string, fallback?: any): any {
-    return getConfig().get(key, fallback);
+    const c = getConfig();
+    if (c) {
+      return c.get(key, fallback);
+    }
+    return null;
   }
 
   getBoolean(key: string, fallback?: boolean): boolean {
-    return getConfig().getBoolean(key, fallback);
+    const c = getConfig();
+    if (c) {
+      return c.getBoolean(key, fallback);
+    }
+    return null;
   }
 
   getNumber(key: string, fallback?: number): number {
-    return getConfig().getNumber(key, fallback);
+    const c = getConfig();
+    if (c) {
+      return c.getNumber(key, fallback);
+    }
+    return null;
   }
 
   set(key: string, value?: any) {
-    getConfig().set(key, value);
+    const c = getConfig();
+    if (c) {
+      c.set(key, value);
+    }
   }
 }
 
 export const ConfigToken = new InjectionToken<any>('USERCONFIG');
 
 function getConfig(): CoreConfig {
-  const Ionic = (window as any).Ionic;
+  const win: IonicWindow = window as any;
-  if (Ionic && Ionic.config) {
+  if (typeof win !== 'undefined') {
-    return Ionic.config;
+    const Ionic = win.Ionic;
+    if (Ionic && Ionic.config) {
+      return Ionic.config;
+    }
   }
   return null;
 }

angular/src/providers/platform.ts

@@ -1,7 +1,7 @@
-
 import { EventEmitter, Injectable } from '@angular/core';
-import { proxyEvent } from '../util/util';
 import { PlatformConfig, detectPlatforms } from '@ionic/core';
+import { proxyEvent } from '../util/util';
+
 
 @Injectable()
 export class Platform {
@@ -37,7 +37,6 @@ export class Platform {
   resize = new EventEmitter<Event>();
 
   constructor() {
-
     proxyEvent(this.pause, document, 'pause');
     proxyEvent(this.resume, document, 'resume');
     proxyEvent(this.backButton, document, 'backbutton');

angular/src/types/interfaces.ts

@@ -1,9 +1,9 @@
 
 export interface IonicGlobal {
-  config: any;
+  config?: any;
-  ael: (elm: any, eventName: string, cb: Function, opts: any) => void;
+  ael?: (elm: any, eventName: string, cb: Function, opts: any) => void;
-  raf: Function;
+  raf?: Function;
-  rel: (elm: any, eventName: string, cb: Function, opts: any) => void;
+  rel?: (elm: any, eventName: string, cb: Function, opts: any) => void;
 }
 
 export interface IonicWindow extends Window {

angular/test/nav/.angular-cli.json

@@ -1,68 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "demo"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico",
-        {
-          "glob": "**/*",
-          "input": "../node_modules/@ionic/angular/dist/ionic",
-          "output": "./ionic"
-        }
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  },
-  "warnings": {
-    "typescriptMismatch": false
-  }
-}

angular/test/nav/e2e/action-sheet.e2e-spec.ts

@@ -1,34 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { ActionSheetPage } from './action-sheet.po';
-import { sleep } from './utils/helpers';
-
-describe('Action Sheet Page', () => {
-  let page: ActionSheetPage;
-
-  beforeEach(() => {
-    page = new ActionSheetPage();
-  });
-
-  it('should open page', async (done) => {
-    await page.navigateTo();
-    done();
-  });
-
-  it('should open the action sheet, then close it using the close button', async (done) => {
-    const button = await page.getButton();
-    await sleep(100);
-    await button.click();
-    await sleep(500);
-    let actionSheet = await page.getActionSheet();
-    expect(await actionSheet.isPresent()).toBeTruthy();
-    const closeButton = await page.getActionSheetCloseButton();
-    await closeButton.click();
-    await sleep(500);
-    actionSheet = null;
-    actionSheet = await page.getActionSheet();
-    expect(await actionSheet.isPresent()).toBeFalsy();
-    done();
-  });
-
-});

angular/test/nav/e2e/action-sheet.po.ts

@@ -1,19 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class ActionSheetPage {
-  navigateTo() {
-    return browser.get('/actionSheet');
-  }
-
-  getButton() {
-    return element(by.css('ion-button'));
-  }
-
-  getActionSheet() {
-    return element(by.css('ion-action-sheet'));
-  }
-
-  getActionSheetCloseButton() {
-    return element(by.css('.action-sheet-cancel'));
-  }
-}

angular/test/nav/e2e/alert.e2e-spec.ts

@@ -1,33 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { AlertPage } from './alert.po';
-import { sleep } from './utils/helpers';
-
-describe('Alert Page', () => {
-  let page: AlertPage;
-
-  beforeEach(() => {
-    page = new AlertPage();
-  });
-
-  it('should open page', async (done) => {
-    await page.navigateTo();
-    done();
-  });
-
-  it('should open the alert, then close it using the close button', async (done) => {
-    const button = await page.getButton();
-    await sleep(100);
-    await button.click();
-    await sleep(500);
-    let alert = await page.getAlert();
-    expect(await alert.isPresent()).toBeTruthy();
-    const closeButton = await page.getCloseButton();
-    await closeButton.click();
-    await sleep(500);
-    alert = null;
-    alert = await page.getAlert();
-    expect(await alert.isPresent()).toBeFalsy();
-    done();
-  });
-});

angular/test/nav/e2e/alert.po.ts

@@ -1,19 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class AlertPage {
-  navigateTo() {
-    return browser.get('/alert');
-  }
-
-  getButton() {
-    return element(by.css('ion-button'));
-  }
-
-  getAlert() {
-    return element(by.css('ion-alert'));
-  }
-
-  getCloseButton() {
-    return element(by.css('.alert-button'));
-  }
-}

angular/test/nav/e2e/basic-inputs.e2e-spec.ts

@@ -1,183 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { BasicInputsPage } from './basic-inputs.po';
-
-describe('Basic Inputs Page', () => {
-  let page: BasicInputsPage;
-
-  beforeEach(() => {
-    page = new BasicInputsPage();
-  });
-
-  it('should display title', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Ionic Core Basic Inputs Demo');
-  });
-
-  describe('search input', () => {
-    it('should display the starting text', () => {
-      page.navigateTo();
-      const el = page.getIonicSearchInput();
-      expect(el.getAttribute('value')).toEqual(null);
-    });
-
-    it('should reflect back the entered data', () => {
-      page.navigateTo();
-      const el = page.getIonicSearchInputEditable();
-      el.clear();
-      el.sendKeys('I am new text');
-      expect(page.getSearchOutput()).toEqual('I am new text');
-    });
-
-    // it('should disable', () => {
-    //   page.navigateTo();
-    //   const inp = page.getIonicSearchInputEditable();
-    //   const cb = page.getDisableButton();
-    //   cb.click();
-    //   expect(inp.isEnabled()).toEqual(false);
-    // });
-  });
-
-  describe('text input', () => {
-    it('should display the starting text', () => {
-      page.navigateTo();
-      const el = page.getIonicTextInput();
-      expect(el.getAttribute('value')).toEqual('This is the Text Input');
-    });
-
-    it('should reflect back the entered data', () => {
-      page.navigateTo();
-      const el = page.getIonicTextInputEditable();
-      el.clear();
-      el.sendKeys('I am new text');
-      expect(page.getTextOutput()).toEqual('I am new text');
-    });
-
-    it('should trigger validation errors', () => {
-      page.navigateTo();
-      const el = page.getIonicTextInput();
-      const inp = page.getIonicTextInputEditable();
-      expect(hasClass(el, 'ng-invalid')).toEqual(false);
-      inp.clear();
-      inp.sendKeys('ninechars');
-      expect(hasClass(el, 'ng-invalid')).toEqual(true);
-      inp.sendKeys('X');
-      expect(hasClass(el, 'ng-invalid')).toEqual(false);
-    });
-
-    it('should disable', () => {
-      page.navigateTo();
-      const inp = page.getIonicTextInputEditable();
-      const cb = page.getDisableButton();
-      cb.click();
-      expect(inp.isEnabled()).toEqual(false);
-    });
-  });
-
-  describe('numeric input', () => {
-    it('should remain type number with modifications', () => {
-      page.navigateTo();
-      const el = page.getIonicNumericInput();
-      const inp = page.getIonicNumericInputEditable();
-      expect(page.getNumericOutputType()).toEqual('number');
-      inp.sendKeys('318');
-      expect(page.getNumericOutputType()).toEqual('number');
-      inp.clear();
-      inp.sendKeys('-0');
-      expect(page.getNumericOutputType()).toEqual('number');
-      inp.sendKeys('.48859');
-      expect(page.getNumericOutputType()).toEqual('number');
-    });
-
-    it('should disable', () => {
-      page.navigateTo();
-      const inp = page.getIonicNumericInputEditable();
-      const cb = page.getDisableButton();
-      cb.click();
-      expect(inp.isEnabled()).toEqual(false);
-    });
-  });
-
-  describe('textarea input', () => {
-    it('should display the starting text', () => {
-      page.navigateTo();
-      const el = page.getIonicTextareaInput();
-      expect(el.getAttribute('value')).toEqual('This is the Textarea Input');
-    });
-
-    it('should reflect back the entered data', () => {
-      page.navigateTo();
-      const el = page.getIonicTextareaInputEditable();
-      el.clear();
-      el.sendKeys('I am new text');
-      expect(page.getTextareaOutput()).toEqual('I am new text');
-    });
-
-    it('should trigger validation errors', () => {
-      page.navigateTo();
-      const el = page.getIonicTextareaInput();
-      const inp = page.getIonicTextareaInputEditable();
-      expect(hasClass(el, 'ng-invalid')).toEqual(false);
-      inp.clear();
-      inp.sendKeys('ninechars');
-      expect(hasClass(el, 'ng-invalid')).toEqual(true);
-      inp.sendKeys('X');
-      expect(hasClass(el, 'ng-invalid')).toEqual(false);
-    });
-
-    it('should disable', () => {
-      page.navigateTo();
-      const inp = page.getIonicTextareaInputEditable();
-      const cb = page.getDisableButton();
-      cb.click();
-      expect(inp.isEnabled()).toEqual(false);
-    });
-  });
-
-  describe('checkbox input', () => {
-    it('should be set the initial value', () => {
-      page.navigateTo();
-      const el = page.getIonicCheckbox();
-      expect(el.getAttribute('checked')).toEqual('true');
-    });
-
-    it('should reflect toggling the value', () => {
-      page.navigateTo();
-      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
-        const el = page.getIonicCheckbox();
-        el.click();
-        expect(page.getCheckboxOutput()).toEqual('false');
-      });
-    });
-  });
-
-  describe('toggle input', () => {
-    it('should be set the initial value', () => {
-      page.navigateTo();
-      const el = page.getIonicToggle();
-      expect(el.getAttribute('checked')).toBeNull();
-    });
-
-    it('should reflect toggling the value', () => {
-      page.navigateTo();
-      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
-        const el = page.getIonicToggle();
-        el.click();
-        expect(page.getToggleOutput()).toEqual('true');
-      });
-    });
-  });
-
-  describe('date time picker', () => {
-    it('should be set the initial value', () => {
-      page.navigateTo();
-      const el = page.getIonicDatetime();
-      expect(el.getAttribute('value')).toEqual('2017-11-18T14:17:45-06:00');
-    });
-  });
-
-  async function hasClass(el: ElementFinder, cls: string): Promise<boolean> {
-    const classes = await el.getAttribute('class');
-    return classes.split(' ').indexOf(cls) !== -1;
-  }
-});

angular/test/nav/e2e/basic-inputs.po.ts

@@ -1,91 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class BasicInputsPage {
-  navigateTo() {
-    return browser.get('/basic-inputs');
-  }
-
-  getIonicCheckbox() {
-    return element(by.id('ionCheckbox'));
-  }
-
-  getCheckboxOutput() {
-    return element(by.id('checkboxOutput')).getText();
-  }
-
-  getIonicDatetime() {
-    return element(by.id('ionDatetimeInput'));
-  }
-
-  getDatetimeOutput() {
-    return element(by.id('datetimeOutput')).getText();
-  }
-
-  getIonicToggle() {
-    return element(by.id('ionToggle'));
-  }
-
-  getToggleOutput() {
-    return element(by.id('toggleOutput')).getText();
-  }
-
-  getTitleText() {
-    return element(by.css('.title')).getText();
-  }
-
-  getIonicTextareaInput() {
-    return element(by.id('ionTextareaInput'));
-  }
-
-  getIonicTextareaInputEditable() {
-    const parent = this.getIonicTextareaInput();
-    return parent.all(by.css('textarea')).first();
-  }
-
-  getTextareaOutput() {
-    return element(by.id('textareaOutput')).getText();
-  }
-
-  getIonicSearchInput() {
-    return element(by.id('ionSearchInput'));
-  }
-
-  getIonicSearchInputEditable() {
-    const parent = this.getIonicSearchInput();
-    return parent.all(by.css('input')).first();
-  }
-
-  getSearchOutput() {
-    return element(by.id('searchOutput')).getText();
-  }
-
-  getIonicTextInput() {
-    return element(by.id('ionTextInput'));
-  }
-
-  getIonicTextInputEditable() {
-    const parent = this.getIonicTextInput();
-    return parent.all(by.css('input')).first();
-  }
-
-  getIonicNumericInput() {
-    return element(by.id('ionNumericInput'));
-  }
-
-  getIonicNumericInputEditable() {
-    const parent = this.getIonicNumericInput();
-    return parent.all(by.css('input')).first();
-  }
-
-  getTextOutput() {
-    return element(by.id('textOutput')).getText();
-  }
-
-  getNumericOutputType() {
-    return element(by.id('numericOutputType')).getText();
-  }
-
-  getDisableButton() {
-    return element(by.id('disableCheckbox'));
-  }
-}

angular/test/nav/e2e/group-inputs.e2e-spec.ts

@@ -1,111 +0,0 @@
-import { browser, ElementFinder, promise } from 'protractor/built';
-
-import { GroupInputsPage } from './group-inputs.po';
-
-describe('Group Inputs Page', () => {
-  let page: GroupInputsPage;
-
-  beforeEach(() => {
-    page = new GroupInputsPage();
-  });
-
-  it('should display title', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Ionic Core Group Inputs Demo');
-  });
-
-  describe('radio group', () => {
-    it('should have the proper initial value', () => {
-      page.navigateTo();
-      const el = page.getRaioGroup();
-      expect(el.getAttribute('value')).toEqual('tripe');
-    });
-
-    it('should check the proper initial radio button', () => {
-      page.navigateTo();
-      const btns = page.getGroupedRadioButtons();
-      expect(btns.tripe.getAttribute('checked')).toEqual('true');
-      expect(btns.beef.getAttribute('checked')).toEqual(null);
-      expect(btns.chicken.getAttribute('checked')).toEqual(null);
-      expect(btns.brains.getAttribute('checked')).toEqual(null);
-      expect(btns.tongue.getAttribute('checked')).toEqual(null);
-    });
-
-    it('should reflect back the changed value', () => {
-      page.navigateTo();
-      const btns = page.getGroupedRadioButtons();
-      btns.chicken.click();
-      expect(page.getRadioOutputText()).toEqual('chicken');
-    });
-
-    it('should check and uncheck the proper buttons on a changed value', () => {
-      page.navigateTo();
-      const btns = page.getGroupedRadioButtons();
-      btns.chicken.click();
-      expect(btns.chicken.getAttribute('checked')).toEqual('true');
-      expect(btns.beef.getAttribute('checked')).toEqual(null);
-      expect(btns.tripe.getAttribute('checked')).toEqual(null);
-      expect(btns.brains.getAttribute('checked')).toEqual(null);
-      expect(btns.tongue.getAttribute('checked')).toEqual(null);
-    });
-  });
-
-  describe('non-grouped radios', () => {
-    it('should check the proper initial radio button', () => {
-      page.navigateTo();
-      const btns = page.getUngroupedRadioButtons();
-      expect(btns.tripe.getAttribute('checked')).toEqual('true');
-      expect(btns.beef.getAttribute('checked')).toEqual(null);
-      expect(btns.chicken.getAttribute('checked')).toEqual(null);
-      expect(btns.brains.getAttribute('checked')).toEqual(null);
-      expect(btns.tongue.getAttribute('checked')).toEqual(null);
-    });
-
-    it('should reflect back the changed value', () => {
-      page.navigateTo();
-      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
-        const btns = page.getUngroupedRadioButtons();
-        btns.chicken.click();
-        expect(page.getRadioOutputText()).toEqual('chicken');
-      });
-    });
-
-    it('should check and uncheck the proper buttons on a changed value', () => {
-      page.navigateTo();
-      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
-        const btns = page.getUngroupedRadioButtons();
-        btns.chicken.click();
-        expect(btns.chicken.getAttribute('checked')).toEqual('true');
-        expect(btns.beef.getAttribute('checked')).toEqual(null);
-        expect(btns.tripe.getAttribute('checked')).toEqual(null);
-        expect(btns.brains.getAttribute('checked')).toEqual(null);
-        expect(btns.tongue.getAttribute('checked')).toEqual(null);
-      });
-    });
-  });
-
-  describe('segments', () => {
-    it('should have the proper initial value', () => {
-      page.navigateTo();
-      const el = page.getSegment();
-      expect(el.getAttribute('value')).toEqual('tripe');
-    });
-
-    it('should reflect back the changed value', () => {
-      page.navigateTo();
-      return browser.executeScript('window.scrollTo(0, 500);').then(function() {
-        const btns = page.getSegmentButtons();
-        btns.chicken.click();
-        expect(page.getRadioOutputText()).toEqual('chicken');
-      });
-    });
-  });
-
-  describe('select input', () => {
-    it('should be set the initial value', () => {
-      page.navigateTo();
-      const el = page.getIonicSelect();
-      expect(el.getAttribute('value')).toEqual('brains');
-    });
-  });
-});

angular/test/nav/e2e/group-inputs.po.ts

@@ -1,61 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class GroupInputsPage {
-  navigateTo() {
-    return browser.get('/group-inputs');
-  }
-
-  getTitleText() {
-    return element(by.css('.title')).getText();
-  }
-
-  getRaioGroup() {
-    return element(by.id('radio-group'));
-  }
-
-  getGroupedRadioButtons() {
-    return {
-      beef: element(by.id('ion-grp-beef')),
-      tongue: element(by.id('ion-grp-tongue')),
-      brains: element(by.id('ion-grp-brains')),
-      tripe: element(by.id('ion-grp-tripe')),
-      chicken: element(by.id('ion-grp-chicken'))
-    };
-  }
-
-  getSegmentButtons() {
-    return {
-      beef: element(by.id('ion-seg-beef')),
-      tongue: element(by.id('ion-seg-tongue')),
-      brains: element(by.id('ion-seg-brains')),
-      tripe: element(by.id('ion-seg-tripe')),
-      chicken: element(by.id('ion-seg-chicken'))
-    };
-  }
-
-  getUngroupedRadioButtons() {
-    return {
-      beef: element(by.id('ion-beef')),
-      tongue: element(by.id('ion-tongue')),
-      brains: element(by.id('ion-brains')),
-      tripe: element(by.id('ion-tripe')),
-      chicken: element(by.id('ion-chicken'))
-    };
-  }
-
-  getSegment() {
-    return element(by.id('segment'));
-  }
-
-  getRadioOutputText() {
-    return element(by.id('radioOutput')).getText();
-  }
-
-  getIonicSelect() {
-    return element(by.id('ionSelect'));
-  }
-
-  getSelectOutput() {
-    return element(by.id('selectOutput')).getText();
-  }
-}

angular/test/nav/e2e/home.e2e-spec.ts

@@ -1,19 +0,0 @@
-import { HomePage } from './home.po';
-
-describe('Demo Home Page', () => {
-  let page: HomePage;
-
-  beforeEach(() => {
-    page = new HomePage();
-  });
-
-  it('should display title', () => {
-    page.navigateTo();
-    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
-  });
-
-  it('should navigate to home for root', () => {
-    page.navigateToRoot();
-    expect(page.getTitleText()).toEqual('Ionic Core Angular Demo Application');
-  });
-});

angular/test/nav/e2e/home.po.ts

@@ -1,15 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class HomePage {
-  navigateTo() {
-    return browser.get('/home');
-  }
-
-  navigateToRoot() {
-    return browser.get('/');
-  }
-
-  getTitleText() {
-    return element(by.css('.title')).getText();
-  }
-}

angular/test/nav/e2e/loading.e2e-spec.ts

@@ -1,31 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { LoadingPage } from './loading.po';
-import { sleep } from './utils/helpers';
-
-describe('Loading Page', () => {
-  let page: LoadingPage;
-
-  beforeEach(() => {
-    page = new LoadingPage();
-  });
-
-  it('should open page', async (done) => {
-    await page.navigateTo();
-    done();
-  });
-
-  it('should open the loading indicator, then close it', async (done) => {
-    const button = await page.getButton();
-    await sleep(100);
-    await button.click();
-    await sleep(500);
-    let loading = await page.getLoading();
-    expect(loading).toBeTruthy();
-    await sleep(1000);
-    loading = null;
-    loading = await page.getLoading();
-    expect(await loading.isPresent()).toBeFalsy();
-    done();
-  });
-});

angular/test/nav/e2e/loading.po.ts

@@ -1,16 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class LoadingPage {
-  navigateTo() {
-    return browser.get('/loading');
-  }
-
-  getButton() {
-    return element(by.css('ion-button'));
-  }
-
-  getLoading() {
-    return element(by.css('ion-loading'));
-  }
-
-}

angular/test/nav/e2e/modal.e2e-spec.ts

@@ -1,49 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { ModalPage } from './modal.po';
-import { sleep } from './utils/helpers';
-
-describe('Modal Page', () => {
-  let page: ModalPage;
-
-  beforeEach(() => {
-    page = new ModalPage();
-  });
-
-  it('should open page', async (done) => {
-    await page.navigateTo();
-    done();
-  });
-
-  it('should open the modal', async (done) => {
-    /*const button = await page.getButton();
-    await button.click();
-    await sleep(500);
-    const blah = page.getModal();
-    blah.isPresent().then((present) => {
-      console.log('boom boom boom: ', present);
-      done();
-    }).catch((ex) => {
-      console.log('caught it: ', ex);
-      done();
-    });
-    */
-    // console.log('blah: ', await blah.isPresent());
-    /*page.getModal().then((modal) => {
-      return modal.isPresent();
-    }).then((present) => {
-      console.log('boom boom boom: ', present);
-      done();
-    }).catch(() => {
-      console.log('caught it');
-      done();
-    })
-    */
-    done();
-    /*console.log('modal: ', modal);
-    console.log('modal.isPresent: ', modal.isPresent);
-    console.log('Got the modal: ', await modal.isPresent());
-    expect(await modal.isPresent()).toBeTruthy();
-    */
-  });
-});

angular/test/nav/e2e/modal.po.ts

@@ -1,20 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class ModalPage {
-  navigateTo() {
-    return browser.get('/modal');
-  }
-
-  getButton() {
-    return element(by.css('ion-button'));
-  }
-
-  getModal() {
-    return element(by.css('page-one'));
-  }
-
-  getDismissButton() {
-    return element(by.css('button.dismiss-btn'));
-  }
-
-}

angular/test/nav/e2e/popover.e2e-spec.ts

@@ -1,33 +0,0 @@
-import { browser, ElementFinder } from 'protractor/built';
-
-import { PopoverPage } from './popover.po';
-import { sleep } from './utils/helpers';
-
-describe('Popover Page', () => {
-  let page: PopoverPage;
-
-  beforeEach(() => {
-    page = new PopoverPage();
-  });
-
-  it('should open page', async (done) => {
-    await page.navigateTo();
-    done();
-  });
-
-  it('should open the popover, then close it using the close button', async (done) => {
-    const button = await page.getButton();
-    await sleep(100);
-    await button.click();
-    await sleep(500);
-    let popover = await page.getPopover();
-    expect(await popover.isPresent()).toBeTruthy();
-    const closeButton = await page.getCloseButton();
-    await closeButton.click();
-    await sleep(500);
-    popover = null;
-    popover = await page.getPopover();
-    expect(await popover.isPresent()).toBeFalsy();
-    done();
-  });
-});

angular/test/nav/e2e/popover.po.ts

@@ -1,19 +0,0 @@
-import { browser, by, element } from 'protractor';
-
-export class PopoverPage {
-  navigateTo() {
-    return browser.get('/popover');
-  }
-
-  getButton() {
-    return element(by.css('ion-button'));
-  }
-
-  getPopover() {
-    return element(by.css('ion-popover'));
-  }
-
-  getCloseButton() {
-    return element(by.css('.popover-button'));
-  }
-}

angular/test/nav/e2e/utils/helpers.ts

@@ -1,6 +0,0 @@
-
-export function sleep(duration: number = 300) {
-  return new Promise(resolve => {
-    setTimeout(resolve, duration);
-  });
-}

angular/test/nav/package.json

@@ -1,52 +0,0 @@
-{
-  "name": "@ionic/angular-test-nav",
-  "private": true,
-  "version": "0.0.1",
-  "license": "MIT",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
-  },
-  "dependencies": {
-    "@angular/animations": "^6.0.0-rc.3",
-    "@angular/common": "^6.0.0-rc.3",
-    "@angular/compiler": "^6.0.0-rc.3",
-    "@angular/core": "^6.0.0-rc.3",
-    "@angular/forms": "^6.0.0-rc.3",
-    "@angular/http": "^6.0.0-rc.3",
-    "@angular/platform-browser": "^6.0.0-rc.3",
-    "@angular/platform-browser-dynamic": "^6.0.0-rc.3",
-    "@angular/router": "^6.0.0-rc.3",
-    "@ionic/angular": "next",
-    "body-parser": "^1.18.2",
-    "core-js": "^2.4.1",
-    "express": "^4.16.2",
-    "rxjs": "^6.0.0-terrific-rc.3",
-    "zone.js": "^0.8.20"
-  },
-  "devDependencies": {
-    "@angular/cli": "latest",
-    "@angular/compiler-cli": "latest",
-    "@angular/language-service": "latest",
-    "@types/jasmine": "~2.5.53",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/node": "~6.0.60",
-    "codelyzer": "~3.2.0",
-    "jasmine-core": "~2.6.2",
-    "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
-    "karma-chrome-launcher": "~2.1.1",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
-    "ts-node": "^3.2.2",
-    "tslint": "~5.7.0",
-    "typescript": "^2.5.2"
-  }
-}

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

@@ -1,262 +0,0 @@
-<div class="title">
-  Ionic Core Basic Inputs Demo
-</div>
-
-<ion-grid>
-
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Disable Inputs</ion-label>
-        <ion-checkbox id="disableCheckbox" name="disableCheckbox" [(ngModel)]="disableInputs"></ion-checkbox>
-      </ion-item>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Text Input</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdTextInput">Standard Input</label>
-      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs" />
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="textOutput">{{textValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Text Input</ion-label>
-        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" [disabled]="disableInputs"></ion-input>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Search Input</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Text Input</ion-label>
-        <ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10" [disabled]="disableInputs"></ion-searchbar>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="searchOutput">{{searchValue}}</span>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Numeric Input</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Numeric Input</ion-label>
-        <ion-input type="number" id="ionNumericInput" name="ionNumericInput" [(ngModel)]="numericValue" [disabled]="disableInputs"></ion-input>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-      <div>
-        Value:
-        <span id="numericOutput">{{numericValue}}</span>
-      </div>
-      <div>
-        Type:
-        <span id="numericOutputType">{{typeOf(numericValue)}}</span>
-      </div>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Textarea Input</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdTextareaInput">Standard Textarea Input</label>
-      <textarea id="stdTextareaInput" name="stdTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></textarea>
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="textareaOutput">{{textareaValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Textarea Input</ion-label>
-        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="textareaValue" minlength="10" [disabled]="disableInputs"></ion-textarea>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Checkbox</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdCheckbox">Standard Checkbox</label>
-      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs" />
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="checkboxOutput">{{checkboxValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Checkbox</ion-label>
-        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" [disabled]="disableInputs"></ion-checkbox>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Checkbox No ngModel</ion-label>
-        <ion-checkbox id="ionCheckboxNoModel" name="ionCheckboxNoModel" [checked]="checkboxValue" (ionChange)="checkboxValue=$event.target.checked"
-          [disabled]="disableInputs"></ion-checkbox>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Toggle</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdToggle">Standard Toggle</label>
-      <input type="checkbox" id="stdToggle" name="stdToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs" />
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="toggleOutput">{{toggleValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Toggle</ion-label>
-        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" [disabled]="disableInputs"></ion-toggle>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Select</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdSelect">Select</label>
-      <select id="stdSelect" name="stdSelect" [(ngModel)]="selectValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs">
-        <option value="bacon">Bacon</option>
-        <option value="pepperoni">Pepperoni</option>
-        <option value="ham" selected>Ham</option>
-        <option value="sausage">Sausage</option>
-        <option value="pineapple">Pineapple</option>
-      </select>
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="selectOutput">{{selectValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Select</ion-label>
-        <ion-select id="ionSelectInput" [(ngModel)]="selectValue" [disabled]="disableInputs">
-          <ion-select-option value="bacon">Bacon</ion-select-option>
-          <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
-          <ion-select-option value="ham" selected>Ham</ion-select-option>
-          <ion-select-option value="sausage">Sausage</ion-select-option>
-          <ion-select-option value="pineapple">Pineapple</ion-select-option>
-        </ion-select>
-      </ion-item>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Date Time Picker</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdToggle">ISO Formatted Date</label>
-      <input id="stdDatetimeInput" name="stdDatetimeInput" [(ngModel)]="datetimeValue" placeholder="YYYY-MM-DDTHH:mm:ssZ" [disabled]="disableInputs"
-      />
-    </ion-col>
-    <ion-col>
-      Value:
-      <span id="datetimeOutput">{{datetimeValue}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Date</ion-label>
-        <ion-datetime id="ionDatetimeInput" pickerFormat="YYYY-MM-DD HH:mm:ss" displayFormat="MM/DD/YYYY HH:mm:ss" name="ionDatetimeInput"
-          [(ngModel)]="datetimeValue" [disabled]="disableInputs"></ion-datetime>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <h2>Range</h2>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <label for="stdRangeInput">Range Value</label>
-      <input id="stdRangeInput" type="number" [(ngModel)]="rangeValue"  [disabled]="disableInputs" />
-    </ion-col>
-    <ion-col>
-      Value:
-      <span>{{rangeValue}}</span>
-      <span>{{typeOf(rangeValue)}}</span>
-    </ion-col>
-  </ion-row>
-
-  <ion-row>
-    <ion-col>
-      <ion-range id="ionRangeInput" [(ngModel)]="rangeValue" [disabled]="disableInputs"></ion-range>
-    </ion-col>
-    <ion-col></ion-col>
-  </ion-row>
-</ion-grid>
-
-<a href='home'>Home</a>

angular/test/nav/src/app/simple-tabs/camaro/camaro.module.ts

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

angular/test/nav/src/app/simple-tabs/charger/charger.module.ts

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

angular/test/nav/src/app/simple-tabs/mustang/mustang.module.ts

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

angular/test/nav/src/environments/environment.ts

@@ -1,8 +0,0 @@
-// The file contents for the current environment will overwrite these during build.
-// The build system defaults to the dev environment which uses `environment.ts`, but if you do
-// `ng build --env=prod` then `environment.prod.ts` will be used instead.
-// The list of which env maps to which file can be found in `.angular-cli.json`.
-
-export const environment = {
-  production: false
-};

angular/test/nav/src/typings.d.ts

@@ -1,5 +0,0 @@
-/* SystemJS module definition */
-declare var module: NodeModule;
-interface NodeModule {
-  id: string;
-}

angular/test/nav/testing/router-stubs.ts

@@ -1,57 +0,0 @@
-/* tslint:disable:directive-selector */
-/* tslint:disable:component-selector */
-/* tslint:disable:use-host-property-decorator */
-/* tslint:disable:no-input-rename */
-// export for convenience.
-export { ActivatedRoute, Router, RouterLink, RouterOutlet} from '@angular/router';
-
-import { Component, Directive, Injectable, Input } from '@angular/core';
-import { NavigationExtras } from '@angular/router';
-
-@Directive({
-  selector: '[routerLink]',
-  host: {
-    '(click)': 'onClick()'
-  }
-})
-export class RouterLinkStubDirective {
-  @Input('routerLink') linkParams: any;
-  navigatedTo: any = null;
-
-  onClick() {
-    this.navigatedTo = this.linkParams;
-  }
-}
-
-@Component({selector: 'router-outlet', template: ''})
-export class RouterOutletStubComponent { }
-
-@Injectable()
-export class RouterStub {
-  navigate(commands: any[], extras?: NavigationExtras) { }
-}
-
-
-// Only implements params and part of snapshot.params
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
-
-@Injectable()
-export class ActivatedRouteStub {
-
-  // ActivatedRoute.params is Observable
-  private subject = new BehaviorSubject(this.testParams);
-  params = this.subject.asObservable();
-
-  // Test parameters
-  private _testParams: {};
-  get testParams() { return this._testParams; }
-  set testParams(params: {}) {
-    this._testParams = params;
-    this.subject.next(params);
-  }
-
-  // ActivatedRoute.snapshot.params
-  get snapshot() {
-    return { params: this.testParams };
-  }
-}

angular/test/nav/tsconfig.json

@@ -1,31 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "sourceMap": true,
-    "declaration": false,
-    "moduleResolution": "node",
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "target": "es5",
-    "lib": [
-      "dom",
-      "es2017"
-    ],
-    "baseUrl": ".",
-    "paths": {
-      "@angular/animations": ["../../../node_modules/@angular/animations/"],
-      "@angular/common": ["../../../node_modules/@angular/common/"],
-      "@angular/compiler": ["../../../node_modules/@angular/compiler/"],
-      "@angular/core": ["../../../node_modules/@angular/core/"],
-      "@angular/forms": ["../../../node_modules/@angular/forms/"],
-      "@angular/http": ["../../../node_modules/@angular/http/"],
-      "@angular/language-service": ["../../../node_modules/@angular/language-service/"],
-      "@angular/platform-browser": ["../../../node_modules/@angular/platform-browser/"],
-      "@angular/platform-browser-dynamic": ["../../../node_modules/@angular/platform-browser-dynamic/"],
-      "@angular/router": ["../../../node_modules/@angular/router/"],
-      "rxjs": ["../../../node_modules/rxjs/"],
-      "@ionic/angular": ["../../../"]
-    }
-  }
-}

angular/test/testapp/.gitignore

@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # 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

@@ -6,7 +6,7 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
-    './e2e/**/*.e2e-spec.ts'
+    './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
     'browserName': 'chrome'
@@ -21,8 +21,8 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      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

@@ -1,8 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/e2e",
+    "outDir": "../out-tsc/app",
-    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
@@ -11,4 +10,4 @@
       "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/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.ts

@@ -1,18 +1,18 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector: 'app-basic-inputs-page',
   templateUrl: './basic-inputs-page.component.html',
-  styleUrls: ['./basic-inputs-page.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class BasicInputsPageComponent implements OnInit {
+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;
@@ -21,10 +21,6 @@ export class BasicInputsPageComponent implements OnInit {
 
   searchValue: string;
 
-  constructor() {}
-
-  ngOnInit() {}
-
   typeOf(v: any): string {
     return typeof v;
   }