angular input value

@Component({
  selector: 'app-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; }
}
    /* @Input()
- @Input is used in the child component to indicate that the 
  component can receive its value from the parent component
*/

// Parent component
@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';

@Component({
    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;


#https://www.fiverr.com/tamerjarrar<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">
</form>

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