Emit and handle events

Currently, our Event component displays an icon that is supposed to delete the item from the list. As you already know, the list of the Events is held in the parent component - App. Therefore, it's not possible for the Event component to delete itself.

In order to delete an event from a list, we have to pass a call from the child component (Event) to its parent component (App). In this lesson, we will learn how to pass function calls between components.

Before we start to that, let's work on App template first:

1. App template

1.1. Style

We don't need styles anymore, let's remove them from app.component.scss.

1.2. Template

Update app.component.html file with the following template:

  <div class="container">
    <div class="row mt-3">
      <div class="col-md-9">
        <div *ngFor="let event of events">
          <app-event [value]="event"></app-event>
        </div>
        <div class="text-center">
          <a
            type="button"
            mdbBtn
            color="info"
            class="waves-effect mb-4"
            mdbWavesEffect
            >Add event
          </a>
        </div>
      </div>
      <div class="col-md-3">
        <h3 class="text-uppercase my-3">Schedule</h3>
        <h6 class="my-3">
          It's going to be busy that today. You have
          <b> {{ events.length }} events </b> today.
        </h6>
        <h1 class="my-3">
          <div class="row">
            <div class="col-3 text-center">
              <mdb-icon fas icon="sun"></mdb-icon>
            </div>
            <div class="col-9 ">Sunny</div>
          </div>
          <div class="row">
            <div class="col-3 text-center">
              <mdb-icon fas icon="thermometer-three-quarters"></mdb-icon>
            </div>
            <div class="col-3 ">23°C</div>
          </div>
        </h1>
        <p>
          Don't forget your sunglasses. Today will dry and sunny, becoming warm
          in the afternoon with temperatures of between 20 and 25 degrees.
        </p>
      </div>
    </div>
  </div>
  

List of changes:

• Added "Add event" button
• Added event counter ({{ events.length }}) in the right column
• Added static (Weather Forecast) content to the right column
• Added some minor classes to enhance spacing

Preview:

Note:
In the right-hand column, we added an Event counter which tells us how many events are scheduled for today. In order to get this number we are simply counting elements within the array using {{events.length}} function.

2. Delete Event function

Now we can create a function which removes a particular Event from an array. It's a very simple function, it looks for index of clicked item, and remove it from the events array[] using splice() function.

Add following function to AppComponent class within the app.component.ts file

  deleteEvent(event: any) {
    const itemIndex = this.events.findIndex(el => el === event);
    this.events.splice(itemIndex, 1);
  }  	
  

Note:
findIndex() method returns the index of the first element in the array that satisfies the provided testing function. In our case we are checking whether item (event) which we are about to delete is one of the items (el) in the array, and returns it's position.

Now when our function is ready, we can emit and event from Event component.

3. Handle click event

1. Add new function to EventComponent class within the event.component.ts file.
• app.component.ts

  handleDeleteClick() {
    console.log("Delete button clicked!");
  } 	
  

2. Update the mdb-badge in event.component.html
• app.component.ts

    <mdb-badge (click)="handleDeleteClick()" danger="true" class="text-center float-right">-</mdb-badge>    
  

3. Test it. Run the app, open developers console and click on the delete icon. You should see confrimation message in a console.

4. Event emitting

In order to call the parent (App) component's deleteEvent() function from child (Event) component we have to emit an Event from one component and catch it other.

Warning:
The naming might be a little bit confusing. This is because we have component within our app which we called an Event. This Event represents a single entry in our agenda (we could have called it Item, Appointment or Entry).

At the same time Angular uses Event to call JavaScript-like events. This Event reffers to "occurrence" on which JavaScript can react.

Since this may be a bit confusing I will use different styles and whenever we will reffer to Event Component i will use yellow highligt, while whenever I will referr to Angular Event I will use a red font.

Whenever we want to emit an Event, we have to import EventEmmiter first. Since we will transfer outside the component, we also have to import Output directive.

1. Import EventEmmiter and Output in event.components.ts
• event.component.ts

    <mdb-badge (click)="handleDeleteClick()" danger="true" class="text-center float-right">-</mdb-badge>    
  

Note:
In a previous lessons we were passing data to (inside) our component, in order to do that we had to use Input directive.

Now, since we are passing data out (otuside) of our component, we have to use Output directive.

2. Define the @Output() within EventComponent class.
• event.component.ts

  @Output() deleteEventInstanceEvent: EventEmitter<any> = new EventEmitter<any>();
  

Note:
We called Output deleteEventInstanceEvent to make it clear that we are emitting and Event to delete instance of Event.

You can read the name as deleteEventInstanceEvent().

If we would call our calendar entry differently, i.e. Appointment, we could simply call this function deleteAppointmentEvent without ussing extra Instance word.

3. Update the handleDeleteClick() method with the following code:
• event.component.ts

  handleDeleteClick() {
    this.deleteEventInstanceEvent.emit(this.value);
  }
  

That how your event.component.ts file should looks like:

• event.component.ts

import {Component, EventEmitter, Input, Output} from '@angular/core';

@Component({
  selector: 'app-event',
  templateUrl: './event.component.html',
})
export class EventComponent {
  @Input() value: any;
  @Output() deleteEventInstanceEvent: EventEmitter<any> = new EventEmitter<any>();


  handleDeleteClick() {
    this.deleteEventInstanceEvent.emit(this.value);
  }
}

  

Now whenever user click on the delete icon, next to the Event title, it will emit a new event and pass itself (an object) as a parameter.

4. Catching & handling events

The last thing we have to do is to catch emmited event from the Event component.

In order to that let's update our <app-event> tag in app.component.html:

        <app-event [value]="event" (deleteEventInstanceEvent)="deleteEvent($event)"></app-event>

  

As you probably guessed, we have binded here emitted event (deleteEventInstanceEvent) with the internal App component's function - deleteEvent() and we are passing.

In other words - we are telling Angular that he can expect that <app-event> can emmit events and which function do we want to use to handle it.

Now, whenever we click on a delete icon:

1. User clicks on the delete icon
2. (click) calls handleDeleteClick() function
3. handleDeleteClick() emits deleteEventInstanceEvent event
4. App component catches it and triggers deleteEvent()
5. deleteEvent() deletes corresponding element from the array