Output signal

Emitting output from a component is easy with signals. Parent component passes a function to the searchEntered event. When enter key is pressed in the child component, a value is emitted to the output signal, subsequently notifying the parent about this event.

Parent component:

<app-test (searchEntered)="searchEntered($event)"></app-test>

  searchEntered(query: string) {
    console.log('searchEntered', query);
  }

Child component

<input placeholder="Search for something" (keyup.enter)="onSearch()" #search />

  searchEntered = output<string>();

  onSearch() {
    const query = this.searchInput()?.nativeElement.value;
    this.searchEntered.emit(query);
  }