How to get value typed in an input in Angular / Getting element values in Angular

On:

Requirement
Suppose user types something in an input box. There are many reasons why you would require this value such as for showing options based on this value, show user entered data in a span element, show a set of hidden elements on the basis of this value, greet user, send this value as a parameter in an ajax request and many more.
When you are working on an angular application and capturing user input is required, an obvious question arises. How to do it? This post will guide you on that.

Getting value of element
There are a couple of ways that can provide the value which the user types in an input box. They are by binding an event to the concerned text box element and using template reference variables. Both methods will be discussed in this post.

Method 1 : Using Event Binding

Event binding enables the DOM element to respond to user’s actions. When an element is bound to an event, then in case of occurrence of that event, an event handler function is called which performs the required task.
Typical events are mouse, click and key press events. Since events are related to user interaction and user interacts with the application via the view of application and view of an angular application means a component.
Thus, support for event binding is a feature of angular components.
Two steps are required for binding an element to some event. They are:

  1. Providing the name of event followed by the name of function which will handle this event. This is done in HTML template of the component.
  2. Defining the handler function. Body of the function contains the task which will be performed when the event occurs. Handler function is defined in the component class.

Using event binding provides access to the actual event object representing the event which took place. This event object contains useful information about the event such as its name, the details of element which raised this event, x and y coordinates(in case of mouse events) and so on.
In order to gain access to event object, a $event object is supplied in the handler function declaration in the HTML template and an argument is provided in the handler function definition in the component class as shown below.

<div>
    <span> Enter email</span>
   <input type=”text” (focusout) = “focusoutHandler($event) “/>
</div>

Learn more about Angular Event Binding, follow this link.

HTML template has an input box which shall respond to a focusout event using the function focusoutHandler. This function will be defined in the component class below.

export class CodippaComponent {

   private focusoutHandler(event) {
       console.log(‘Focus out’);
   }
}

Handler function contains an argument to receive the event object. Now whenever, user types or clicks in the input box and moves to some other element, a focusout event will be raised and the corresponding handler function will be called.

For accessing event object, you need to write $event in HTML template but the function argument can be any name, it is not necessary to name it as event only.

Getting User Input From Event Object
The event object explained above contains useful information about the event such as its name and the element which triggered this event. This object has a target property which is the actual DOM element which raised this event. In our example, it will be the text box.
Now when we have a reference to the input box which raised the event, we can easily get its value using the value property of the target property. That is, for getting the value of the element from event object, we need to use

event.target.value

Thus, the modified event handler function in component class would be

export class CodippaComponent {

   private focusoutHandler(event) {
       console.log(‘Input Value is ‘ + event.target.value);
   }
}

If you want to retrieve the text of a static element such as span or div, then use innerText property of the element as event.target.innerText.

Method 2 : Using Template Reference Variable
A template reference variable is a reference or a handle to a DOM element in the HTML template. This variable is declared in the HTML template inside the element declaration to which it is the reference.
It is a user defined name prefixed with a hash(#) symbol as

<input type=”text” #email placeholder=”Enter email” />

Here, #email is the reference variable to the text box.

Getting User Input From Reference Variable
Reference variable represents the DOM element at which it was declared. Thus, if a reference variable is defined and supplied to an event handler function as below

<div>
    <span> Enter email</span>
   <input type=”text” #email (focusout) = “focusoutHandler(email) “/>
</div>

Then, in the component it is printed to the console

export class CodippaComponent {

   private focusoutHandler(refVar) {
       console.log(refVar);
   }
}

Here is what you get

<input _ngcontent-c8 type=”text“>

Now, how to get the value typed in the input box using this approach. Since the reference variable represents the text box, we can access all the properties of text box using this variable. Value of a text box is stored in its value property. So, we can access this property of text box using reference variable as refVar.value.

Instead of passing the reference variable to the handler function in the component class, we can directly pass the value property by modifying our template HTML as

<div>
    <span> Enter email</span>
   <input type=”text” #email (focusout) = “focusoutHandler(email.value) “/>
</div>

Scope of Template reference variable
Reference variable of an HTML element is visible inside the entire template. Thus, if you want to show the value of an input box inside a span or a div on the same page, you can directly access it.
There is no need of an event handler function and for some other complex logic in the component class.

<div>
    <span> Enter email</span>
   <input type=”text” #email />
   <div>{{email.value}}</div>
</div>

Note that the value is printed using Interpolation. If you don’t use interpolation, then Angular will treat it as a string and print it as it is.

If you want to retrieve the text of a static element such as span or div, then use innerText property of the element as refVar.innerText.

Reference Variable : Alias
A reference variable can also be declared using ref- prefix. In this there is no need to prefix it with # symbol. The value of reference variable defined using ref- prefix can be accessed by removing the ref- prefix as shown below.

<div>
    <span> Enter email</span>
   <input type=”text” ref-email />
   <div>{{email.value}}</div>
</div>

Benefits
Using any of the above two methods, you can

  1. Get the user typed value in an input box.
  2. Get text of static elements such as span or div.
  3. Get text of a clicked element by binding a click event to that element and then use $event object or reference variable.
  4. Set text of element A to the text of element B using reference variable at element B and then accessing this reference variable at element A.

Hope you liked this post. Hit the clap button below to show your appreciation towards the article.

2 Comments

Leave a Reply