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

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. 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.

Latest posts by Ajitesh Kumar (see all)

• Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
• LLMs for Adaptive Learning & Personalized Education - October 8, 2024
• Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024