Angular – Two Ways to Capture User Inputs

This blog represents concepts and code samples which can be used for capturing user inputs from the form in an Angular app using following techniques:

• Using $event object
• Using template reference variable

Using $event in template statement

The following depicts the code which needs to be used in template code. Make a note of

<input (keyup)="setFirstname($event)"/>

The following depicts the code which needs to be used in the component code.

  setFirstname(event: any) {
    this.uName = event.target.value;
  }

Using Template Reference Variables

The following depicts the code which needs to be used in template code. Make a note of usage of # (hash) with the template reference variable, email. The reference variable, #email, represents the input element.

 <input #email (keyup)="setEmail(email.value)"/>

The following depicts the code which needs to be used in the component code.

  setEmail(value: string) {
    this.uEmail = value;
  }

Code Samples for Component & Template

The following code represents the template file, app.component.html.

<div>
<form>
<div class="form-group">
      <label for="emailField">Email address</label>
      <input type="email" class="form-control" id="emailField" #email (keyup)="setEmail(email.value)" placeholder="name@example.com"/>
    </div>
<div class="form-group">
      <label for="fullname">Name</label>
      <input class="form-control" id="fullname" (keyup)="setFirstname($event)" placeholder="Full Name"/>
    </div>
</form>
</div>
<hr/>
<ul>  
<li>Email: {{uEmail}}</li>
<li>First name: {{uName}}</li>
</ul>

The following code represents the component, namely, app.component.ts.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public title = 'Angular Forms Tutorial';
  uEmail = '';
  uName = '';

  setEmail(value: string) {
    this.uEmail = value;
  }

  setFirstname(event: any) {
    this.uName = event.target.value;
  }

}

Greater details can be found on following page, Angular form user inputs. In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.

• Author
• Recent Posts

Follow me

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. For latest updates and blogs, follow us on Twitter. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking. Check out my other blog, Revive-n-Thrive.com

Follow me

Latest posts by Ajitesh Kumar (see all)

• Logistic Regression in Machine Learning: Python Example - April 26, 2024
• MSE vs RMSE vs MAE vs MAPE vs R-Squared: When to Use? - April 25, 2024
• Gradient Descent in Machine Learning: Python Examples - April 22, 2024