angular input value

  selector: 'app-key-up4',
  template: `
    <input #box

export class KeyUpComponent_v4 {
  value = '';
  update(value: string) { this.value = value; }
    /* @Input()
- @Input is used in the child component to indicate that the 
  component can receive its value from the parent component

// Parent component
    template: `<app-item-detail [item]='currentItem'></app-item-detail>`
export class AppComponent {
    currentItem = 'Television';

/* Parent Component Notes
- `<app-item-detail [item]='currentItem'></app-item-detail>`
- `<app-item-detail><app-item-detail> is the child selector
- [item] is the target. It has to be the same as the @Input in the child class
- currentItem is the source property from the parent

// Child Component
import { Component, Input } from '@angular/core';

    template: `
                <p>Today's Item: {{ item }}

export class ItemDetailComponent {
    @Input() item: string; //decorate the property with @Input()
    @Input('alias name') item: string;
    // the type of the @input can be of any type

/* Child Component Notes
- `@Input item: string` indicates that the child component
   will take the value from the parent component
*/const type = (<HTMLInputElement>document.getElementById('type')).value;

#<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">

let playerName: string;
onSubmit() {
  return this.playerName;


Also in JavaScript: