# 7. Listen to child component events

## 1. Add event emitter to component

The `EventEmitter` in Angular is used to emit event from child components to parent components and can pass what ever object, array primitive, null or anything you would like. Event emitters are made by using  Angular's`@Output` decorators. We will address the other side of the equation about passing in data to the component with property binding later in the course using the opposite with `@Input` decorators.

* Add event emitter to component 
* Emit add attendee event when the form is submitted by the `submit` method.

{% code title="src/app/event/components/add-attendee/add-attendee.component.ts" %}

```typescript
import { Component, EventEmitter } from '@angular/core';
import { Output } from '@angular/core';
import { Attendee } from '../../../models';
import { FormGroup } from '@angular/forms';
import { FormControl } from '@angular/forms';
import { Validators } from '@angular/forms';

@Component({
  selector: 'app-add-attendee',
  templateUrl: './add-attendee.component.html',
  styleUrls: ['./add-attendee.component.scss']
})
export class AddAttendeeComponent {
  @Output()
  addAttendee = new EventEmitter<Attendee>();

  addAttendeeForm = new FormGroup({
    name: new FormControl('', [Validators.required])
  });

  submit() {
    const attendee = {
      name: this.addAttendeeForm.value.name,
      attending: true,
      guests: 0
    };
    this.addAttendee.emit(attendee);
  }
}
```

{% endcode %}

## 2.  Add event listener to add-event-component selector

* Add the event listener to the add-event-component selector. The $event is an angular specific variable which is a generic name for what ever you emitted from the child component.

{% code title="src/app/event/containers/event/event.component.html" %}

```markup
<app-add-attendee (addAttendee)="addAttendee($event)"></app-add-attendee>
```

{% endcode %}

## 3. Add method to call when event is emitted

Note we recreate the array every time versus using an array `.push` method which would mutate the array.

* Add a `addAttendee` method to the component.
* Declare a `attendees` property on the class and initialise it to an empty array.

{% code title="/src/app/event/containers/event/event.component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { Attendee } from '../../../models';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
  styleUrls: ['./event.component.scss']
})
export class EventComponent implements OnInit {
  attendees: Attendee[] = [];
  constructor() {}

  ngOnInit() {}

  addAttendee(attendee: Attendee) {
    this.attendees = [...this.attendees, attendee];
    console.log('TCL: EventComponent -> addAttendee -> this.attendees', this.attendees);
  }
}
```

{% endcode %}

## StackBlitz Link

{% embed url="<https://stackblitz.com/github/duncanhunter/angular-and-ngrx-demo-app/tree/7-listent-to-child-component>" %}
Web Link: Link to the demo app running in StackBlitz
{% endembed %}