feat(demo): tie each ionic component to a standard component

packages/angular/demo/README.md

@@ -1,27 +1,21 @@
 # Demo
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
+The purpose of this application is to provide an Angular CLI application where Ionic Core components can be tested in a simple manner. This application allows the developer to experiment with interactions between Angular and Ionic in an easy and safe manner.
 
-## Development server
+## Getting started
 
-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.
+From this directory:
 
-## Code scaffolding
+- `npm i`
+- `npm start` - to serve the application
+- `npm test` - to run the unit tests
+- `npm run e2e` - to run the end to end tests
 
-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`.
+See the `package.json` file for a complete list of script. The above are just the most common.
 
-## Build
+## Running the Angular CLI
 
-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.
+This application installs the Angular CLI locally so you do not need to have it installed globally. You can use `npm` to run any of the `ng` commands. For example:
 
-## 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).
+- `npm run ng build -- --prod` - run a production build
+- `npm run ng g component my-cool-thing`

packages/angular/demo/e2e/inputs.e2e-spec.ts

@@ -18,7 +18,7 @@ describe('Demo Inputs Page', () => {
     it('should display the starting text', () => {
       page.navigateTo();
       const el = page.getIonicTextInput();
-      expect(el.getAttribute('value')).toEqual('This is the Ionic Text Input');
+      expect(el.getAttribute('value')).toEqual('This is the Text Input');
     });
 
     it('should reflect back the entered data', () => {
@@ -26,7 +26,7 @@ describe('Demo Inputs Page', () => {
       const el = page.getIonicTextInputEditable();
       el.clear();
       el.sendKeys('I am new text');
-      expect(page.getIonicTextInputOutputText()).toEqual('I am new text');
+      expect(page.getTextOutput()).toEqual('I am new text');
     });
 
     it('should trigger validation errors', () => {
@@ -46,7 +46,7 @@ describe('Demo Inputs Page', () => {
     it('should display the starting text', () => {
       page.navigateTo();
       const el = page.getIonicTextareaInput();
-      expect(el.getAttribute('value')).toEqual('This is the Ionic Textarea Input');
+      expect(el.getAttribute('value')).toEqual('This is the Textarea Input');
     });
 
     it('should reflect back the entered data', () => {
@@ -54,7 +54,7 @@ describe('Demo Inputs Page', () => {
       const el = page.getIonicTextareaInputEditable();
       el.clear();
       el.sendKeys('I am new text');
-      expect(page.getIonicTextareaInputOutputText()).toEqual('I am new text');
+      expect(page.getTextareaOutput()).toEqual('I am new text');
     });
 
     it('should trigger validation errors', () => {
@@ -81,7 +81,7 @@ describe('Demo Inputs Page', () => {
       page.navigateTo();
       const el = page.getIonicCheckbox();
       el.click();
-      expect(page.getIonicCheckboxOutputText()).toEqual('false');
+      expect(page.getCheckboxOutput()).toEqual('false');
     });
   });
 
@@ -96,7 +96,7 @@ describe('Demo Inputs Page', () => {
       page.navigateTo();
       const el = page.getIonicToggle();
       el.click();
-      expect(page.getIonicToggleOutputText()).toEqual('true');
+      expect(page.getToggleOutput()).toEqual('true');
     });
   });
 

packages/angular/demo/e2e/inputs.po.ts

@@ -9,16 +9,16 @@ export class InputsPage {
     return element(by.id('ionCheckbox'));
   }
 
-  getIonicCheckboxOutputText() {
-    return element(by.id('ionCheckboxOutput')).getText();
+  getCheckboxOutput() {
+    return element(by.id('checkboxOutput')).getText();
   }
 
   getIonicToggle() {
     return element(by.id('ionToggle'));
   }
 
-  getIonicToggleOutputText() {
-    return element(by.id('ionToggleOutput')).getText();
+  getToggleOutput() {
+    return element(by.id('toggleOutput')).getText();
   }
 
   getTitleText() {
@@ -34,8 +34,8 @@ export class InputsPage {
     return parent.all(by.css('textarea')).first();
   }
 
-  getIonicTextareaInputOutputText() {
-    return element(by.id('ionTextareaInputOutput')).getText();
+  getTextareaOutput() {
+    return element(by.id('textareaOutput')).getText();
   }
 
   getIonicTextInput() {
@@ -47,7 +47,7 @@ export class InputsPage {
     return parent.all(by.css('input')).first();
   }
 
-  getIonicTextInputOutputText() {
-    return element(by.id('ionTextInputOutput')).getText();
+  getTextOutput() {
+    return element(by.id('textOutput')).getText();
   }
 }

packages/angular/demo/src/app/inputs/inputs-test-page.component.html

@@ -6,81 +6,105 @@
 
   <ion-row>
     <ion-col>
-      <h2>Text Inputs</h2>
+      <h2>Text Input</h2>
     </ion-col>
   </ion-row>
   <ion-row>
     <ion-col>
       <label for="stdTextInput">Standard Input</label>
-      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="stdTextInput" minlength="10"/>
+      <input id="stdTextInput" name="stdTextInput" [(ngModel)]="textValue" minlength="10"/>
     </ion-col>
     <ion-col>
-      Standard Text Input:
-      <span id="stdTextInputOutput">{{stdTextInput}}</span>
+      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)]="ionTextInput" minlength="10" (ionBlur)="onBlur($event)"></ion-input>
+        <ion-input id="ionTextInput" name="ionTextInput" [(ngModel)]="textValue" minlength="10" (ionBlur)="onBlur($event)"></ion-input>
       </ion-item>
     </ion-col>
     <ion-col>
-      Ionic Text Input:
-      <span id="ionTextInputOutput">{{ionTextInput}}</span>
-    </ion-col>
-  </ion-row>
-  <ion-row>
-    <ion-col>
-      <ion-item>
-        <ion-label>Ionic Text Area Input</ion-label>
-        <ion-textarea id="ionTextareaInput" name="ionTextareaInput" [(ngModel)]="ionTextareaInput" minlength="10" (ionBlur)="onBlur($event)"></ion-textarea>
-      </ion-item>
-    </ion-col>
-    <ion-col>
-      Ionic Text Input:
-      <span id="ionTextareaInputOutput">{{ionTextareaInput}}</span>
     </ion-col>
   </ion-row>
 
   <ion-row>
     <ion-col>
-      <h2>Boolean Inputs</h2>
+      <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"></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" (ionBlur)="onBlur($event)"></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)]="stdCheckbox" (blur)="onBlur($event)" />
+      <input type="checkbox" id="stdCheckbox" name="stdCheckbox" [(ngModel)]="checkboxValue" (blur)="onBlur($event)" />
     </ion-col>
     <ion-col>
-      Standard Checkbox:
-      <span id="stdCheckboxOutput">{{stdCheckbox}}</span>
+      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)]="ionCheckbox" (ionBlur)="onBlur($event)"></ion-checkbox>
+        <ion-checkbox id="ionCheckbox" name="ionCheckbox" [(ngModel)]="checkboxValue" (ionBlur)="onBlur($event)"></ion-checkbox>
       </ion-item>
     </ion-col>
     <ion-col>
-      Ionic Checkbox:
-      <span id="ionCheckboxOutput">{{ionCheckbox}}</span>
+    </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" (blur)="onBlur($event)" />
+    </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)]="ionToggle" (ionBlur)="onBlur($event)"></ion-toggle>
+        <ion-toggle id="ionToggle" name="ionToggle" [(ngModel)]="toggleValue" (ionBlur)="onBlur($event)"></ion-toggle>
       </ion-item>
     </ion-col>
     <ion-col>
-      Ionic Toggle:
-      <span id="ionToggleOutput">{{ionToggle}}</span>
     </ion-col>
   </ion-row>
 </ion-grid>

packages/angular/demo/src/app/inputs/inputs-test-page.component.ts

@@ -7,14 +7,11 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
   encapsulation: ViewEncapsulation.None
 })
 export class InputsTestPageComponent implements OnInit {
-  ionTextareaInput = 'This is the Ionic Textarea Input';
-  ionTextInput = 'This is the Ionic Text Input';
-  stdTextInput = 'This is the HTML Text Input';
+  textareaValue = 'This is the Textarea Input';
+  textValue = 'This is the Text Input';
 
-  ionCheckbox = true;
-  stdCheckbox = true;
-
-  ionToggle = false;
+  checkboxValue = true;
+  toggleValue = false;
 
   constructor() {}