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.