🧽 Clean Way to Listen to Events from Children Components in Angular
Tags: javascript, angular, typescript, beginners
Published: 2021-12-11 19:28:37

I don't write much about Angular but as I am working on a project that uses Angular at the moment I thought why not share a thing or two that I found interesting.

As someone who is definitely not an Angular expert I was looking for a clean solution on how to listen for element events that are part of a child component's template.

This is of course quite a trivial thing but it might be of value to people who are starting with Angular and are facing the same problem.

Let's start.

<h2>Situation:</h2>
We want to listen to child component input element's events inside of the parent component. (do something with it in the parent)

<h3>Parent template code: (parent.component.html)</h3>

```html
<div>
  <h1>Parent component</h1>
  <angular-child></angular-child>
</div>
```
<h3>Child template code: (child.component.html)</h3>
```html
<div>
  Child Input: <input type="text" />
</div>
```

Let's say we want to listen to a `keydown` event that is emitted by the `<input />` element above.

<h2>Solution:</h2>
![problem solved](https://media2.giphy.com/media/CLLlVrnuuhTq0/giphy.gif?cid=ecf05e47a255dm73xrse7hdib4rotqpml1oplj779yhabuw3&rid=giphy.gif)
<h3>Child</h3>

Template code (child.component.html):
```html
<div>
  Child Input: <input type="text" (keydown)="handleKeydown($event)" />
  <p>Result from child component: {{ text }}</p>
</div>
```
Component code (child.component.ts):
```typescript
import { Component, EventEmitter, Output } from "@angular/core";

@Component({
  selector: "angular-child",
  templateUrl: "./child.component.html",
  styles: ["div { background-color: red }"]
})
export class ChildComponent {
  @Output()
  keyAction: EventEmitter<KeyboardEvent> = new EventEmitter<KeyboardEvent>();

  text = "";

  handleKeydown(event: KeyboardEvent): void {
    this.text = event.key;
    this.keyAction.emit(event);
  }
}
```
Basically we are just having a method that receives the `KeyboardEvent` on a `(keydown)` event in which the text is saved to a variable and it uses an `EventEmitter` marked with an `@Output()` decorator. (so that we can later catch it in the parent)

<h3>Parent</h3>

Template code (parent.component.html):
```html
<div>
  <h1>Parent component</h1>
  <angular-child (keyAction)="handleKeyAction($event)"></angular-child>
  <p>Result from parent component: {{ keyPressed }}</p>
</div>
```

Component code (parent.component.ts):
```typescript
import { Component } from "@angular/core";

@Component({
  selector: "angular-parent",
  templateUrl: "./parent.component.html",
  styleUrls: ["./parent.component.css"]
})
export class ParentComponent {
  keyPressed = "";

  handleKeyAction(event: KeyboardEvent): void {
    this.keyPressed = event.key + " from Parent";
  }
}
```
Inside of the parent, we are calling a method each time the (keyAction) event has been emitted from the child. In that method we can do whatever we want with the received data. In this case we are just getting the key and adding some text to it to indicate that it has been changed before storing it to a variable. 

<h3>Full code example on Codesandbox:</h3>

{% codesandbox throbbing-breeze-ogsqq %}

Again, it's not much but I hope somebody will find it helpful as it might not be an obvious solution at first.

Leave a comment with your opinion about the solution 😄

<a href='https://ko-fi.com/S6S06RIRQ' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi1.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>