Реактивное связывание HTML с RxJS

Question

В контексте приложения Angular я ищу реактивный способ связать html с rx js наблюдаемыми. Вот фиктивный пример:

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <input
      type="checkbox"
      [checked]="check1$ | async"
      (click)="check1$.next(!check1$.getValue())"
    />
    <input
      type="checkbox"
      [checked]="check2$ | async"
      (click)="check2$.next(!check2$.getValue())"
    />
    <p>status : {{ status$ | async }}</p>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  check1$ = new BehaviorSubject(true);
  check2$ = new BehaviorSubject(true);

  status$ = combineLatest([this.check1$, this.check2$]).pipe(
    map(([c1, c2]) => {
      return `${c1}, ${c2}`;
    }),
  );
}

Какое ваше мнение, пожалуйста?

Большое спасибо за обмен передовым опытом

Answer 1

С реактивной формой, думая о

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="form">
      <input type="checkbox" formControlName="check1" />
      <input type="checkbox" formControlName="check2" />
      <p>status : {{ check$ | async }}</p>
    </form>
  `,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  form = new FormGroup({
    check1: new FormControl(true),
    check2: new FormControl(false),
  });

  check$ = this.form.valueChanges.pipe(
    map(({ check1, check2 }) => `${check1}, ${check2}`),
  );
}