Angular 4 - get input value

Question

I would like to know how to get the value from an input on angular 4  I looked over the documentation on angular and the example with the key event doesn t work very well for me and I can t find a proper example how to do this so please help me out  The problem  I try to read the input s value and after submiting the value to another component that will add the value to a select tag e g  send the name of the person to a list for a select tag

User · Answer

If you want to read only one field value, I think, using the template reference variables is the easiest way

Template

<input #phone placeholder="phone number" />

<input type="button" value="Call" (click)="callPhone(phone.value)" />

**Component** 
 
callPhone(phone): void 
{
  
console.log(phone);

}

If you have a number of fields, using the reactive form one of the best ways.

User · Answer

html   lt input type  hidden   fondovalor value  valores  gt        lt button  click   getFotoFondo    gt Obtener lt  button gt    ts   ViewChild  fondovalor   fondovalor ElementRef   getFotoFondo             const valueInput   this fondovalor nativeElement value

User · Answer

lt form  submit   onSubmit    gt      lt input   ngModel    playerName  gt   lt  form gt   let playerName  string  onSubmit       return this playerName

User · Answer

If you dont want to use two way data binding  You can do this   In HTML   lt form  ngSubmit   onSubmit  event   gt      lt input name  player  value  Name  gt   lt  form gt    In component  onSubmit event  any       return event target player value

User · Answer

HTML Component   lt input type  quot text quot   formControl   quot txtValue quot  gt   TS Component  public txtValue   new FormControl       validators  Validators required       We can use this method to save using API  LearnersModules is the module file on our Angular files SaveSampleExams is the service file is one function method   gt   this service SaveSampleExams LearnersModules  subscribe   gt               data    gt     gt                this dataSaved   true   gt                LearnersModules txtValue   this txtValue value    gt

User · Answer

You can also use template reference variables   lt form  submit   onSubmit player value   gt      lt input  player placeholder  player name  gt   lt  form gt    onSubmit playerName  string      console log playerName

User · Answer

In HTML add   lt input  keyup   onKey  event   gt    And in component Add  onKey event   const inputValue   event target value

User · Answer

You can use  keyup  or  change  events  see example below   in HTML    lt input  keyup   change  event   gt    Or    lt input  change   change  event   gt    in Component   change event   console log event target value

User · Answer

I think you were planning to use Angular template reference variable based on your html template       in html   lt input  nameInput type  text  class  form-control  placeholder     gt       in add-player ts file  import   OnInit  ViewChild  ElementRef   from   angular core     export class AddPlayerComponent implements OnInit       ViewChild  nameInput   nameInput  ElementRef      constructor           ngOnInit           addPlayer             you can access the input value via the following syntax       console log  player name     this nameInput nativeElement value

[angular] Angular 4 - get input value

Examples related to angular

Examples related to input

Examples related to components