Appending a value to a string variable in TypeScript

Question

I'm new to Angular.I'm trying to get the user input of a text box in each keystroke and append it to a string variable like on java.

in the text box I use (keyup)="onKey($event)" as follows,

<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Departure Airport"  id="departure" name="departure" (keyup)="onKey($event)" [(ngModel)]="booking.departure" >

Then I used that and tried to append each letter entered to a variable as follows

export class BookingComponent implements OnInit {
  

  public  userInPut="";

  constructor(private flightService:FlightService, private router: Router) { }

  ngOnInit(): void {

  }

  onKey(event: any){
    this.userInPut=this.userInPut+event;
   console.log(this.userInPut);
  }


}

I expected that the output would be a,ab,abc,abcd like that but the out put was a set of objects as shown in the figure below

What I wanted to do was display that userInPut variable value under the textbox.Are all variables created in typescript are object form.Please give me a clarification and get the expected output.

The first argument of an event handler will always (unless you explicitly changed the behavior) be an event object, hence the [object KeyboardEvent]. Have a look at the documentation what properties a KeyboardEvent has and what might solve your problem. — Andreas
– Andreas, Commented Jul 18, 2020 at 12:07
any reason not to use [(ngModel)]? Do you really need to listen for each keystroke? — Clashsoft
– Clashsoft, Commented Jul 18, 2020 at 12:48

Joundill · Accepted Answer · 2020-08-24 04:54:47Z

3

If you need output like (a,ab,abc,abcd) then try this:

In HTML file:

     <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Departure Airport"  id="departure" name="departure" (keyup)="onkeyUp($event.target.value)">

In TS file:

userInPut: any = '';

  onkeyUp(value) {
    this.userInPut = value;
    console.log(this.userInPut);
  }

edited Aug 24, 2020 at 4:54

Joundill

7,84113 gold badges40 silver badges54 bronze badges

answered Jul 18, 2020 at 12:14

Prakash Harvani

1,0418 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Appending a value to a string variable in TypeScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related