How to bind input keyup value to a variable in component.ts?

Question

I have the following in my component.ts file:

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

    contructor(){}

    ngOnInit(): void {}
}

Basically whatever I typed in the <input #box (keyup)="0"> will be shown immediately in the {{box.value}}. As this is purely in the html file, I am wondering how can I bind the input {{box.value}} to sampleString: string; in my component.ts so that I can use it somewhere else.

Saurabh Yadav · Accepted Answer · 2019-11-01 03:54:13Z

2

you can bind the method on change event in input element and update the string value

class file

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

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

       sampleString: string;

       updateBox(e) {
         this.sampleString = e.target.value; 
       }

    }

Template File

<input #box (keyup)="0" (input)="updateBox($event)">
  <p>{{box.value}}</p>
<p>This is sampleString Value: {{sampleString}} </p>

answered Nov 1, 2019 at 3:54

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

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

Comments

Shashank Vivek · Accepted Answer · 2019-11-01 03:47:03Z

1

You can use angular two way binding as shown below

@Component({
  selector: 'app-loop-back',
  template: `
    <input [(ngModel)]="sampleString">
    <p>{{sampleString}}</p>
  `
})
export class LoopbackComponent implements OnInit{ 
    sampleString: string;
   contructor(){}

    ngOnInit(): void {}
}

edited Nov 1, 2019 at 3:47

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

answered Nov 1, 2019 at 3:45

Velusamy Venkatraman

7364 silver badges16 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-11-01 03:59:36Z

0

Try like this if you want to use only HTML an not 2 way binding,

<input #box (keyup)="sampleString = $event.target.value">

Working Demo

edited Nov 1, 2019 at 3:59

answered Nov 1, 2019 at 3:53

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to bind input keyup value to a variable in component.ts?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related