Angular: 4 ways to fetch the value of input in the controller

Angular: 4 ways to fetch the value of input in the controller

Angular gives you various ways to fetch data from HTML input in the controller.  So here we are going to discuss 4 different ways to do so.

Using event Binding (1-way)

We can use event binding with HTML input to get data in the controller. There are many events which one can use. Various events which help us to get data are:

• (input) – triggered every time a user enters some data.
  
• (key) – triggered every time a key is released after pressing. Similarly, we have (keydown) and (keypress)
• (key.enter) – triggered every time a user press enter key. So, in this case, we will get the data only when a user types something and after that presses enter key.
• (dbclick) – triggered every time user double clicks on the element.

Here is the list of HTML DOM events https://www.w3schools.com/jsref/dom_obj_event.asp.
Most of them work with angular.

Now let’s see how to use these events. Firstly, bind a controller function with $event as a param to the input event.

<input type="text"  class="form-control"  (keyup.enter)="OnInput($event)" >

Now create the same method in your controller, in our case method name is OnInput

OnInput(event: any) {
this.serverName = event.target.value;
}

Now inside this function, we can get the value of the input from event.target.value and we can assign it to a variable. As we are assigning it to a variable serverName.

Passing Local Reference #id (1-way)

This method uses id and event to fetch input value. Firstly give #id to your input element, as shown below

<input type="text" class="form-control" #myInput >

Now use the angular event to pass the value of the input using its id to a method

<input type="text" class="form-control"  #myInput   (keydown.enter)="OnInput(myInput.value)">

In the above snippet, we are passing myInput.value as a param to OnInput i.e. we are sending the input value to our method.

Now create the method in the controller to received to value.

OnInput(value) {
 this.serverName = value;
}

Here we will receive the input value as the method argument and which we are assigning it to a variable which is serverName in our case.

Using Local Reference @ViewChild  (2-way)

Let say we want to fetch the value of an input element in the controller. Firstly, give a reference id to the input element

<input type="text" class="form-control" #myInput >

Now we can use @viewChild in the controller to access the input element,

@ViewChild('myInput') myInput: ElementRef;

For Angular 8 and above, use below syntax where using boolean property static is mandatory.

@ViewChild('myInput', {static: true}) myInput: ElementRef;

Now once we have linked the dom Input to our controller myInput variable, we can use it to fetch value or change value.

OnInput() {
// fetch value
let inputValue = this.someInput.nativeElement.value;

// set input value
this.someInput.nativeElement.value = 'This is new value';
}

Using ngModel (2-way)

ngModel gives you a 2 ways data binding, which means you can even get the value from HTML to controller and set value from controller to HTML. So in our case, we are going to only fetch value using ngModel HTML input to our controller. This is how you use the directive ngModel:
1. Provide ngModel directive in the HTML element

<input type="text" [(ngModel)]="myInput">

2. To make it work you need to import theFormsModule from the @angular/forms package.

import {FormsModule} from '@angular/forms';

imports: [
 BrowserModule,
 FormsModule
],

3. Now you can access it using variable myInput which we used in step 1 for ngModel.