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.

It's working, you can check here stackblitz.com/edit/angular-2hkxz1 — Anshuman Jaiswal
– Anshuman Jaiswal, Commented Oct 31, 2018 at 8:13
@trichetriche I figured that might have been why I was downvoted but I don't know what else so show. The project made from ng new and most of the code is still that stuff. — codehelp4
– codehelp4, Commented Oct 31, 2018 at 9:12

score 1 · Accepted Answer · 2018-10-31 09:42:33Z

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);
}


}

edited Oct 31, 2018 at 9:42

answered Oct 31, 2018 at 8:16

user6299088

Sign up to request clarification or add additional context in comments.

7 Comments

codehelp4 Over a year ago

That's so weird because in my firefox console it doesn't show. See my screenshot. ibb.co/jyhznf

user6299088 Over a year ago

this is working in firefox also press enter key after type

codehelp4 Over a year ago

I did that's how th other text which is a direct string gets triggered to print. (the text that does show in the screenshot) I'll try the dev firefox.

user6299088 Over a year ago

which version of firefox you using

codehelp4 Over a year ago

the demo you posted works for me too but my own thing doesn't. ff version is ff quantum 63.0 dev version didn't make a difference.

|

Saad Mehmood · Accepted Answer · 2018-10-31 08:12:51Z

0

what you can do is wrap you input in form tag, like:

<form (ngSubmit)="submit()">
    <input type="text" [(ngModel)]="name" name="name">
</form>

In typescript:

name = '';
submit() {
  console.log(this.name);
}

answered Oct 31, 2018 at 8:12

Saad Mehmood

7311 gold badge8 silver badges19 bronze badges

2 Comments

codehelp4 Over a year ago

The typescript function runs as expected but the text of the var doesn't show. ibb.co/jyhznf

Saad Mehmood Over a year ago

@codehelp4 it will call submit method when you press enter

Collectives™ on Stack Overflow

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

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related