Search component with search BLoC

search.component.html

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

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

<ul>
  <li *ngFor="let result of bloc.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 {
  constructor(public readonly bloc: SearchBloc) {}
}