14. Forms: User Input

ClickMeComponent:

import { Component } from '@angular/core';

@Component({
  selector: 'app-click-me',
  template: `
    <button (click)="onClickMe()">Click me!</button>
    {{ clickMessage }}
  `
})
export class ClickMeComponent {
  clickMessage = '';

  onClickMe() {
    this.clickMessage = 'You are my Polymer Princess!';
  }

}

KeyupComponent Untyped:

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyup1',
  template: `
            <h4>Give me some keys!</h4>
            <input (keyup)="onKey($event)">
            <p>{{ values }}</p>
  `
})
export class KeyupComponent_v1 {
    values = '';

    onKey(event: any) { // without type info
      this.values += event.target.value + ' | ';
    }

}

KeyupComponent Typed:

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyup1',
  template: `
            <h4>Give me some keys!</h4>
            <input (keyup)="onKey($event)">
            <p>{{ values }}</p>
  `
})
export class KeyupComponent_v1 {
    values = '';

    onKey(event: KeyboardEvent) { // with type info
      this.values += (<HTMLInputElement>event.target).value + ' | ';
    }

}

LoopbackComponent with Template Reference Variable:

import { Component } from '@angular/core';

@Component({
  selector: 'app-loop-back',
  template: `
        <input #box (keyup)="0">
        <p>{{ box.value }}</p>
  `
})
export class LoopbackComponent { }

KeyupComponent with Template Reference Variable:

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyup2',
  template: `
            <h4>Give me some keys!</h4>
            <input #box (keyup)="onKey(box.value)">
            <p>{{ values }}</p>
  `
})
export class KeyupComponent_v2 {
    values = '';

    onKey(value: string) {
      this.values +=  value + ' | ';
    }

}

key.enter:

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyup3',
  template: `
            <h4>Give me some keys!</h4>
            <input #box (keyup.enter)="onEnter(box.value)">
            <p>{{ value }}</p>
  `
})
export class KeyupComponent_v3 {
    value = '';

    onEnter(value: string) {
      this.value =  value;
    }

}

On Blur:

import { Component } from '@angular/core';

@Component({
  selector: 'app-keyup4',
  template: `
            <h4>Give me some keys!</h4>
            <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;
    }

}

Putting It All Together:

import { Component } from '@angular/core';

@Component({
  selector: 'app-little-tour',
  template: `
        <h4>Little Tour of Technologies</h4>
        <input #newTechnology (keyup.enter)="add(newTechnology.value)"
               (blur)="add(newTechnology.value); newTechnology.value='';">
        <button (click)="add(newTechnology.value)">Add</button>
        <ul>
              <li *ngFor="let technology of technologies">
                  {{ technology }}
              </li>
        </ul>
  `
})
export class LittleTourComponent {
      technologies = ['Angular 4', 'Angular CLI', 'Angular Material', 'Angular 5'];
      add(newTechnology: string) {
        if (newTechnology) {
          this.technologies.push(newTechnology);
        }
      }

}