Angular 15 EventEmitter

In Angular 15, an EventEmitter is a subclass of Subject, which is a type of observable that allows values to be multicasted to many Observers. An EventEmitter emits a value or event and any interested Observers can subscribe to be notified of the change.

Here's an example of how you might use an EventEmitter:

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

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" (input)="search.emit($event.target.value)">
  `
})
export class SearchBoxComponent {
  @Output() search = new EventEmitter<string>();
}

This component has an input element that emits a value every time the user types into it. The EventEmitter instance, search, is decorated with the @Output decorator and can be used to emit the value of the input element to any parent component that is interested in receiving the value.

To receive the emitted value, the parent component can bind to the search event in the template using the (search) syntax, like this:

<app-search-box (search)="doSearch($event)"></app-search-box>

The $event variable in the template will contain the value emitted by the EventEmitter.

Subscribing to an EventEmitter

To receive the values emitted by an EventEmitter, you can use the subscribe() method of the Observable returned by the EventEmitter.

For example, in the parent component that is binding to the search event, you might write something like this:

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

@Component({
  selector: 'app-parent',
  template: `
    <app-search-box (search)="doSearch($event)"></app-search-box>
  `
})
export class ParentComponent {
  doSearch(value: string) {
    console.log(`Searching for: ${value}`);
  }
}

Emitting values from an EventEmitter

To emit a value from an EventEmitter, you can call its emit() method and pass the value as an argument.

For example, in the SearchBoxComponent from the earlier example, you might write code like this to emit the value of the input element when the user clicks a button:

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

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" #query (input)="search.emit(query.value)">
    <button (click)="search.emit(query.value)">Search</button>
  `
})
export class SearchBoxComponent {
  @Output() search = new EventEmitter<string>();
}

Handling errors in an EventEmitter

An EventEmitter is an Observable, which means you can use the error operator to handle errors that occur during the emission of values.

For example, you might write code like this to log any errors that occur:

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

@Component({
  selector: 'app-search-box',
  template: `
    <input type="text" (input)="search.emit($event.target.value)">
  `
})
export class SearchBoxComponent {
  @Output() search = new EventEmitter<string>();

  constructor() {
    this.search.error((err: any) => {
      console.error(`Error occurred: ${err}`);
    });
  }
}

I hope this helps! Let me know if you have any more questions about using EventEmitter in Angular 15.

• Date: 05 Jan 2023