page-pattern.3.ts

class BillPaymentComponent {
  bills$: Observable<BillRow[]>;
  loading$:  Observable<boolean>;

  selected: BillRow[] = [];

  constructor(page: BillPaymentPage) {}

  ngOnInit() {
      this.page.onPageEnter();
      this.bills$ = this.page.bills$;
      this.loading$ = this.page.loading$;
  }

  ngOnDestroy() {
      this.page.onPageLeave();
  }

  onBillRowSelect(b: BillRow) {
    this.selected = this.selected.includes(b) ? this.selected.filter((s) => s != b) : [...this.selected, b];
  }

  onPayButton() {
    this.page.pay(this.selected);
  }
  onPayConfirm() {
      this.page.payConfirm();
  }
  onPayCancel() {
      this.page.payCancel();
  }

  onHideButton() {
    this.page.hide(this.selecetd);
  }
}