Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Angular is a popular front-end framework made by Google. Like other popular front-end frameworks, it uses a component-based architecture to structure apps.

In this article, we’ll look at how to accept user inputs with Angular.

User Input

We can use Angular event bindings to respond to any DOM event.

Many DOM events are triggered by user input. Bindings let us provide a way to get input from users.

For example, we can listen to button clicks as follows:

app.component.ts :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  onClickMe() {  
    alert("clicked");  
  }  
}

app.component.html :

<button (click)="onClickMe()">Click me!</button>

In the code above, we have the onClickMe method to display an alert.

Then in app.component.html , we added a button which is bound to the click and calls onClickMe when it’s clicked.

Get User Input From the $event Object

DOM events carry a payload of information that may useful to the component. We can access that information by referencing the $event object.

For example, we can write:

app.component.ts :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  keysPressed: string[] = [];  
  onKeyUp(event) {  
    this.keysPressed.push(event.key);  
  }  
}

app.component.html :

<input (keyup)="onKeyUp($event)" />  
<p>{{keysPressed.join(',')}}</p>

In the code above, we have the onKeyUp method of AppComponent which called on the keyup event of input.

In onKeyUp , we push the key that was pressed into the this.keyPressed array.

Then in the template, we call join to combine the strings of the keys that are pressed together.

Type the $event

We can use the KeyboardEvent type to type $event for keyboard events.

We can type the element with the HTMLInputElement type.

For example, we can write the following code:

app.component.ts :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  values: string[] = [];  
  onKeyUp(event: KeyboardEvent) {  
    this.values.push((event.target as HTMLInputElement).value);  
  }  
}

app.component.html :

<input (keyup)="onKeyUp($event)" />  
<p>{{values.join(',')}}</p>

In AppComponent above, we set the event to the KeyboardEvent type and casted the event.target to the HTMLInputElement type.

This way, we get auto-complete and so we’re less likely to make mistakes.

However, passing in the whole $event object to the component reveals too many details about the event and so creates tight coupling between the template and the component.

Get User Input From a Template Reference Variable

We can use template reference variables to get input values.

For example, we can do that as follows:

app.component.ts :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {}

app.component.html :

<input #box (keyup)="null" />  
<p>{{box.value}}</p>

On the code above, we have the keyup handler set to null and we added the #box reference variable to the input box.

Then we render the value of the #box input by referencing box.value .

When we type in something into the input box, we’ll see the value displayed in the p element.

This is better than using the $event object to get the value since it doesn’t we don’t have to access the $event object to get the value.

Key Event Filtering

We can listen for specific keypresses in an element by specifying the key with the key attribute.

For example, if we want to listen to presses of the Enter key, we can write the following:

app.component.html :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  onEnter(value) {  
    alert(value);  
  }  
}

app.component.html :

<input #box (keyup.enter)="onEnter(box.value)" />

In the code above, we have the onEnter method in AppComponent that takes the value entered into the input box.

Then in app.component.html , we added the #box template variable to the input and have:

(keyup.enter)="onEnter(box.value)"

to listen to keypresses of the Enter key and pass in the value entered into the input to display the alert by calling onEnter with the value passed in.

On Blur

We can listen to the blur event of an element by passing an event listener to an element.

For example, we can write:

app.component.ts :

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

@Component({  
  selector: "app-root",  
  templateUrl: "./app.component.html",  
  styleUrls: ["./app.component.css"]  
})  
export class AppComponent {  
  value: string;  
  update(value) {  
    this.value = value;  
  }  
}

app.component.html :

<input #box (blur)="update(box.value)" />  
<p>{{value}}</p>

In the code above, we add the #box template variable to the input box and we added a blur event listener by setting (blur) to the update method in AppComponent .

The update method takes an inputted value and sets it to this.value so we can display it in our template.

Then when we type in something into the input and then move the cursor away from the input, we’ll see the value displayed in the p element.

Conclusion

We can handle user inputs by listening to various event listeners.

To get the event object emitted by the event, we can reference the $event object.

To make getting inputted values easier, we can add a template reference variable to the element in the template and then get the properties we want from it.