Emitting Custom Events from Angular Elements

Exhibit how Angular Elements can emit custom events which can be listened to by the host environment or other web components.

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

@Component({
  selector: 'app-custom-event',
  template: `<button (click)="emitCustomEvent()">Emit Event</button>`
})
export class CustomEventComponent {
  // Output decorator allows the component to emit events
  @Output() myCustomEvent = new EventEmitter<string>();

  emitCustomEvent(): void {
    // Emitting the custom event with some data
    this.myCustomEvent.emit('This is custom event data');
  }
}

This Angular component uses the EventEmitter class to create a custom event called 'myCustomEvent'. When the button in the component's template is clicked, the 'emitCustomEvent' method is called, which emits the custom event with a data payload. The '@Output()' decorator makes it possible for this event to be listened to by the parent component or any other DOM elements outside Angular.

// In the parent component or another web component
// Listen for the custom event
const customElement = document.querySelector('app-custom-event');
customElement.addEventListener('myCustomEvent', (event) => {
  console.log('Custom event received:', event.detail);
});

This JavaScript code is meant to be run outside the Angular component, possibly in the host environment such as a parent component. It queries the DOM for the custom element 'app-custom-event' and then adds an event listener that will react to the 'myCustomEvent' custom events emitted by the Angular component. The event's payload (the data) is accessed via 'event.detail'.