Accepting User Input with Angular
Tags: angular, webdev, programming, javascript
Published: 2021-01-23 00:16:24

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