how to get value from textbox using typescript in angular 2

Question

I am a beginner to angular2 / typescript I'm trying get numbers from two textboxes and adding both numbers and display the result using interpolation

@Component({
selector: 'my-app',
template: 
`<h1>Hello {{name}}</h1>
<h1>{{D}}</h1>
 <form>
  <p>first number:<input type="text" id="num1"></p>
  <p>second number:<input type ="text1" id="num2"></p>
  <h1> {{result}}</h1>
  </form>
   <test-app></test-app>`
  })

  export class AppComponent 
  { 
 name = 'Angular'; 
 value : number;value1 : number;result:number;
  constructor(value : number,value1 : number,result:number)
  {

  this.value = parseFloat
  ((document.getElementById("text") as HTMLInputElement).value);
  this.value1 = parseFloat((document.getElementById("text1") 
  as HTMLInputElement).value);
  this.result=this.value+this.value1;
  }}

Binding to form elements is something that is covered in the very beginning of almost any angular tutorial including the many how-to's and tutorial on the main angular 2 site. Follow the link @echonax posted and see if you can figure it out. — Igor
– Igor, Commented Apr 14, 2017 at 10:51

ttfreeman · Accepted Answer · 2019-03-04 19:22:16Z

23

The easiest way is to use template reference variable:

@Component({
  selector: 'app-little-tour',
  template: `
    <input #newHero > 
    <button (click)="addHero(newHero.value)">Add</button>
})

export class LittleTourComponent {
  addHero(newHero: string) {
    console.log(newHero)
  }
}

A complete guide for User Input in Angular can be found here: https://angular.io/guide/user-input

answered Mar 4, 2019 at 19:22

ttfreeman

5,5994 gold badges31 silver badges35 bronze badges

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

1 Comment

william0754 Over a year ago

I got a problem when the input id is dynmic like #newHero{{i}}, I pass its value to the click method like this (click)="addHero(newHero{{i}}.vaue" but it cause compile error, I have no idea how to do it right , any help with a push in the right direction will be very much appreciated.

Jehy · Accepted Answer · 2017-11-17 11:38:55Z

14

if you get without using ngModel:

var   num1= ((document.getElementById("num1") as HTMLInputElement).value);
var   num2= ((document.getElementById("num2") as HTMLInputElement).value);
var result=parseInt(num1)+parseInt(num2);
console.log(result);

edited Nov 17, 2017 at 11:38

Jehy

4,8991 gold badge42 silver badges56 bronze badges

answered Nov 17, 2017 at 11:10

Prashant Yerekar

1491 silver badge2 bronze badges

Comments

ranjeet8082 · Accepted Answer · 2017-04-14 11:06:39Z

9

HTML

<p>first number:<input type="text" id="num1" [(ngModel)] = "value" ></p>
<p>second number:<input type ="text1" id="num2" [(ngModel)] = "value1"></p>
<h1> {{value + value1}}</h1>

Component class

 export class AppComponent {}

answered Apr 14, 2017 at 11:06

ranjeet8082

2,3791 gold badge21 silver badges26 bronze badges

3 Comments

ngopal Over a year ago

Thank you , for the answer but with using a button event how can we do that

ranjeet8082 Over a year ago

Add a button in your html <button (click) = "addValues()">Add</button> . In class make addValues function. addValues() { this.result = this.value + this.value1; } replace value + value1 by result in h1 tag.

ranjeet8082 Over a year ago

Also declare value, value1 and result variables in component class.

Sreeragh A R · Accepted Answer · 2017-04-14 11:10:58Z

7

HTML

<p>first number:<input type="number" [(ngModel)]='a'></p>
<p>second number:<input type ="number" [(ngModel)]='b'></p>
<h1>{{a + b}}</h1>

Component

export class AppComponent 
  { 
 a: number = 0; //set default value as 0
 b: number = 0;

}

edited Apr 14, 2017 at 11:10

answered Apr 14, 2017 at 11:04

Sreeragh A R

3,0413 gold badges32 silver badges58 bronze badges

1 Comment

Tom Stickel Over a year ago

problem will be that if a = 4 and b = 5 you want the total to sum , thus in h1 it should show 9 , but actually that is going to show 45

Saurabh Ranjan · Accepted Answer · 2020-07-02 10:09:48Z

3

app.component.html

<div>
      <input type='text' [(ngModel)]='userName' placeholder='user name' class='user_id_text'>
      </div>
      <div>
      <input type='password' [(ngModel)]='password' placeholder='password' class='user_id_password'>
      </div>
      <div>
      <input type='submit' value='Login' (click)='registeredUser($event)'>
      </div>

app.component.ts

export class AppComponent implements OnInit{
userName ='';
password = '';

ngOnInit(){
  console.log(this.userName+' password -'+this.password);
}
registeredUser(){
 let {userName,password} = this;

 if(userName=='ssss' && password == 'ssss'){
    console.log(userName+' password -'+password);
 }
}

} Explanation - ngModel with [()] is two-way binding. the value in the UI always syncs back to the domain model in your class

edited Jul 2, 2020 at 10:09

answered Dec 13, 2018 at 11:06

Saurabh Ranjan

313 bronze badges

1 Comment

Mike Taverne Over a year ago

Very helpful that you show the complete solution. Only in my case it didn't like the ` symbol -- had to replace with ". Thanks!

Dmitrij Kuba · Accepted Answer · 2017-04-14 10:55:15Z

0

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <form (ngSubmit)="onSubmit(f)">
      <p>first number:<input type="text" ngModel name="num1" id="num1"></p>
    <p>second number:<input type="text" ngModel name="num2" id="num2"></p>
</form>
<test-app></test-app>`
  })

export class AppComponent {
  name = 'Angular';

  constructor() {
  }

  onSubmit(f: NgForm) {
      console.log(f.form.value);
  }
}

answered Apr 14, 2017 at 10:55

Dmitrij Kuba

1,03810 silver badges14 bronze badges

Comments

Nabin Kumar Khatiwada · Accepted Answer · 2019-02-20 14:22:44Z

0

html :

 <input type="text" id="obj_id" >

ts > read as :

 (<HTMLInputElement>document.getElementById(obj_id)).value

If object is involved such as in for loop,text boxes are to be given ids from object field values then Use [id] instead of id

<input type="text" [id]="obj.field"  >

edited Feb 20, 2019 at 14:22

answered Feb 20, 2019 at 10:14

Nabin Kumar Khatiwada

1,65620 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to get value from textbox using typescript in angular 2

7 Answers 7

1 Comment

Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related