Angular 4 - get input value

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)

<form (submit)="onSubmit()">
   <input [(ngModel)]="playerName">
</form>

let playerName: string;
onSubmit() {
  return this.playerName;
}

In HTML add

<input (keyup)="onKey($event)">

And in component Add

onKey(event) {const inputValue = event.target.value;}

If you dont want to use two way data binding. You can do this.

In HTML

<form (ngSubmit)="onSubmit($event)">
   <input name="player" value="Name">
</form>

In component

onSubmit(event: any) {
   return event.target.player.value;
}

html

<input type="hidden" #fondovalor value="valores">
     <button (click)="getFotoFondo()">Obtener</button>

ts

@ViewChild('fondovalor') fondovalor:ElementRef;

getFotoFondo(){ 
        const valueInput = this.fondovalor.nativeElement.value
}

You can also use template reference variables

<form (submit)="onSubmit(player.value)">
   <input #player placeholder="player name">
</form>

onSubmit(playerName: string) {
  console.log(playerName)
}

I think you were planning to use Angular template reference variable based on your html template.

 // in html
 <input #nameInput type="text" class="form-control" placeholder=''/>

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

You can use (keyup) or (change) events, see example below:

in HTML:

<input (keyup)="change($event)">

Or

<input (change)="change($event)">

in Component:

change(event) {console.log(event.target.value);}

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.

HTML Component

>

TS Component

> public txtValue = new FormControl('', { validators:[Validators.required] });

We can use this method to save using API. LModules is the module file on our Angular files SaveSampleExams is the service file is one function method.

>  this.service.SaveSampleExams(LModules).subscribe(
>             (data) => {
>               this.dataSaved = true;
>               LearnersModules.txtValue = this.txtValue.value; 
>              });

In Angular 11, if you have your template set up so that you have a form tag which contains the input tag and there also exists a button that you can click, the following code shows how to alert the input tag's value via two-way data binding:

app.component.html:

<form>
  <input [(ngModel)]="example" name="example">
  <button (click)="alert()">Alert</button>
</form>

app.component.ts:

example: string;

alert() {
  alert(this.example);
}

Note that the name attribute in the template is required here, otherwise you'll get an error message in the developer console saying the following:

Error: If ngModel is used within a form tag, either the name attribute must be set or the form
  control must be defined as 'standalone' in ngModelOptions.

  Example 1: <input [(ngModel)]="person.firstName" name="first">
  Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">