Search component that delegates to search BLoC

search.component.html

<div cdkTrapFocus [cdkTrapFocusAutoCapture]="false">
  <mat-form-field appearance="outline" style="width: 80%;">
    <input 
      matInput
      placeholder="Search for..." 
      ngModel (ngModelChange)="search($event)">
  </mat-form-field>
</div>

<span> {{ preamble$ | async }} </span>

<ul>
  <li *ngFor="let result of results$ | async">
    {{ result }}
  </li>
</ul>

search.component.ts

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

import { SearchBloc } from '../../business-logic/search';

@Component({
  selector: 'app-search',
  styleUrls: ['./search.component.css'],
  templateUrl: './search.component.html',
})
export class SearchComponent {
  readonly preamble$ = this.bloc.preamble$;
  readonly results$ = this.bloc.results$;

  constructor(private readonly bloc: SearchBloc) {}

  search(query: string): void {
    this.bloc.query.next(query);
  }
}