medium-rxjs-reactive-container.ts

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "user-search-container",
  template: `
    <user-search
      [observer]="observer"
      [users]="users | async">
    </user-search>
  `
})
export class UserSearchContainer {

  public observer: PartialObserver<string>;
  public users: Observable<User[]>;
  private _subject: Subject<string>;

  constructor(service: UserSearchService) {
    this._subject = new Subject<string>();
    this.observer = this._subject;
    this.users = this._subject
      .debounceTime(1000)
      .distinctUntilChanged()
      .switchMap(username => this.service.searchUsers(username));
  }
}