medium-rxjs-reactive-presentational.ts

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: "user-search",
    template: `
      <form [formGroup]="form">
        <md-input-container>
          <input formControlName="username" mdInput placeholder="Username">
        </md-input-container>
      </form>
      <md-list>
        <md-list-item *ngFor="let user of users">
          <p md-line>{{ user.login }}</p>
          <p md-line>{{ user.public_repos }} public repo(s)</p>
        </md-list-item>
      </md-list>
    `
})
export class UserSearchComponent implements OnDestroy, OnInit {

  @Input() public observer: PartialObserver<string>;
  @Input() public users: User[];

  public form: FormGroup;
  private _subscription: Subscription;

  constructor(formBuilder: FormBuilder) {
    this.form = formBuilder.group({ username: [] });
  }

  ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }

  ngOnInit(): void {
    this._subscription = this.form.valueChanges
      .map(values => values.username)
      .subscribe(this.observer);
  }
}