docs(aio): update migrated content from anguar.io

aio/content/examples/user-input/src/app/app.component.html

@@ -0,0 +1,27 @@
+<p>
+  <click-me></click-me>
+</p>
+
+<p>
+  <click-me2></click-me2>
+</p>
+
+<h4>Give me some keys!</h4>
+<div><key-up1></key-up1></div>
+
+<h4>keyup loop-back component</h4>
+<div><loop-back></loop-back></div>
+<br><br>
+
+<h4>Give me some more keys!</h4>
+<div><key-up2></key-up2></div>
+
+<h4>Type away! Press [enter] when done.</h4>
+<div><key-up3></key-up3></div>
+
+<h4>Type away! Press [enter] or click elsewhere when done.</h4>
+<div><key-up4></key-up4></div>
+
+<h4>Little Tour of Heroes</h4>
+<p><i>Add a new hero</i></p>
+<div><little-tour></little-tour></div>

aio/content/examples/user-input/src/app/app.component.ts

@@ -0,0 +1,8 @@
+// #docregion
+import { Component }           from '@angular/core';
+
+@Component({
+  selector: 'my-app',
+  templateUrl: './app.component.html'
+})
+export class AppComponent { }

aio/content/examples/user-input/src/app/app.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule }  from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { ClickMeComponent } from './click-me.component';
+import { ClickMe2Component } from './click-me2.component';
+import {
+  KeyUpComponent_v1,
+  KeyUpComponent_v2,
+  KeyUpComponent_v3,
+  KeyUpComponent_v4
+} from './keyup.components';
+import { LittleTourComponent } from './little-tour.component';
+import { LoopbackComponent } from './loop-back.component';
+
+
+@NgModule({
+  imports: [
+    BrowserModule
+  ],
+  declarations: [
+    AppComponent,
+    ClickMeComponent,
+    ClickMe2Component,
+    KeyUpComponent_v1,
+    KeyUpComponent_v2,
+    KeyUpComponent_v3,
+    KeyUpComponent_v4,
+    LittleTourComponent,
+    LoopbackComponent
+  ],
+  providers: [
+
+  ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }

aio/content/examples/user-input/src/app/click-me.component.ts

@@ -0,0 +1,24 @@
+/* FOR DOCS ... MUST MATCH ClickMeComponent template
+// #docregion click-me-button
+  <button (click)="onClickMe()">Click me!</button>
+// #enddocregion click-me-button
+*/
+
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion click-me-component
+@Component({
+  selector: 'click-me',
+  template: `
+    <button (click)="onClickMe()">Click me!</button>
+    {{clickMessage}}`
+})
+export class ClickMeComponent {
+  clickMessage = '';
+
+  onClickMe() {
+    this.clickMessage = 'You are my hero!';
+  }
+}
+// #enddocregion click-me-component

aio/content/examples/user-input/src/app/click-me2.component.ts

@@ -0,0 +1,18 @@
+// #docregion
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'click-me2',
+  template: `
+    <button (click)="onClickMe2($event)">No! .. Click me!</button>
+    {{clickMessage}}`
+})
+export class ClickMe2Component {
+  clickMessage = '';
+  clicks = 1;
+
+  onClickMe2(event: any) {
+    let evtMsg = event ? ' Event target is ' + event.target.tagName  : '';
+    this.clickMessage = (`Click #${this.clicks++}. ${evtMsg}`);
+  }
+}

aio/content/examples/user-input/src/app/keyup.components.ts

@@ -0,0 +1,88 @@
+/* tslint:disable:class-name component-class-suffix */
+// #docplaster
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion key-up-component-1
+@Component({
+  selector: 'key-up1',
+// #docregion key-up-component-1-template
+  template: `
+    <input (keyup)="onKey($event)">
+    <p>{{values}}</p>
+  `
+// #enddocregion key-up-component-1-template
+})
+// #docregion key-up-component-1-class, key-up-component-1-class-no-type
+export class KeyUpComponent_v1 {
+  values = '';
+
+// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type
+  /*
+  // #docregion key-up-component-1-class-no-type
+  onKey(event: any) { // without type info
+    this.values += event.target.value + ' | ';
+  }
+  // #enddocregion key-up-component-1-class-no-type
+  */
+  // #docregion key-up-component-1-class
+
+  onKey(event: KeyboardEvent) { // with type info
+    this.values += (<HTMLInputElement>event.target).value + ' | ';
+  }
+// #docregion key-up-component-1-class-no-type
+}
+// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-2
+@Component({
+  selector: 'key-up2',
+  template: `
+    <input #box (keyup)="onKey(box.value)">
+    <p>{{values}}</p>
+  `
+})
+export class KeyUpComponent_v2 {
+  values = '';
+  onKey(value: string) {
+    this.values += value + ' | ';
+  }
+}
+// #enddocregion key-up-component-2
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-3
+@Component({
+  selector: 'key-up3',
+  template: `
+    <input #box (keyup.enter)="onEnter(box.value)">
+    <p>{{value}}</p>
+  `
+})
+export class KeyUpComponent_v3 {
+  value = '';
+  onEnter(value: string) { this.value = value; }
+}
+// #enddocregion key-up-component-3
+
+//////////////////////////////////////////
+
+// #docregion key-up-component-4
+@Component({
+  selector: 'key-up4',
+  template: `
+    <input #box
+      (keyup.enter)="update(box.value)"
+      (blur)="update(box.value)">
+
+    <p>{{value}}</p>
+  `
+})
+export class KeyUpComponent_v4 {
+  value = '';
+  update(value: string) { this.value = value; }
+}
+// #enddocregion key-up-component-4

aio/content/examples/user-input/src/app/little-tour.component.ts

@@ -0,0 +1,25 @@
+// #docregion
+import { Component } from '@angular/core';
+
+// #docregion little-tour
+@Component({
+  selector: 'little-tour',
+  template: `
+    <input #newHero
+      (keyup.enter)="addHero(newHero.value)"
+      (blur)="addHero(newHero.value); newHero.value='' ">
+
+    <button (click)="addHero(newHero.value)">Add</button>
+
+    <ul><li *ngFor="let hero of heroes">{{hero}}</li></ul>
+  `
+})
+export class LittleTourComponent {
+  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
+  addHero(newHero: string) {
+    if (newHero) {
+      this.heroes.push(newHero);
+    }
+  }
+}
+// #enddocregion little-tour

aio/content/examples/user-input/src/app/loop-back.component.ts

@@ -0,0 +1,12 @@
+// #docregion
+import { Component } from '@angular/core';
+// #docregion loop-back-component
+@Component({
+  selector: 'loop-back',
+  template: `
+    <input #box (keyup)="0">
+    <p>{{box.value}}</p>
+  `
+})
+export class LoopbackComponent { }
+// #enddocregion loop-back-component

aio/content/examples/user-input/src/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>User Input</title>
+    <base href="/">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="user-input-styles.css">
+
+    <!-- Polyfills -->
+    <script src="node_modules/core-js/client/shim.min.js"></script>
+
+    <script src="node_modules/zone.js/dist/zone.js"></script>
+    <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('main.js').catch(function(err){ console.error(err); });
+    </script>
+  </head>
+
+  <body>
+    <my-app>Loading...</my-app>
+  </body>
+
+</html>

aio/content/examples/user-input/src/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

aio/content/examples/user-input/src/user-input-styles.css

@@ -0,0 +1,9 @@
+fieldset {border-style:none}
+img {height: 100px;}
+.box {border: 1px solid black; padding:3px}
+.child-div {margin-left: 1em; font-weight: normal}
+.hidden {display: none}
+.parent-div {margin-top: 1em; font-weight: bold}
+.special {font-weight:bold;}
+.toe {margin-left: 1em; font-style: italic;}
+little-hero {color:blue; font-size: smaller; background-color: Turquoise }