Angular can't get user input passed to typescript from html

Question

html

<input #box (keyup.enter)="Character(box.value)"/>

typescript

Character(value: string) {
  console.log("print this " + value);
}

I confirmed the typescript code in two different places on the net and got the html code from another answer on here and even though the typescript function executes the "value" just will not print to console. I even changed my browser theme thinking that was interfering at one point. (because it changes the color of textboxes and one some sites the text blends with the box)

Update As you can tell from the selected answer I didn't realize my issue was that I had two textboxes which was causing the issue because the value wasn't just getting past to both as I assumed.

Answer 1

This working as expected :

Refer: https://stackblitz.com/edit/angular-jcrcdu?file=src%2Fapp%2Fapp.component.html

app.component.html

<input #box (keyup.enter)="Character(box.value)"/>

<p>{{box1name}}</p>




<input #box2 (keyup.enter)="onEnter(box2.value)"/>

<p>{{box2name}}</p>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  box1name = 'Angular';
  box2name = 'Angular2';

  Character(value: string) {
  this.box1name="print this for box1 :" + value;
  console.log(this.box1name);
}

  onEnter(value: string) {
  this.box2name="print this for box2: " + value;
  console.log(this.onEnter);
}


}