Stream Cell Operator Generalized Pattern.

stream-cell-operator-generalized-pattern.ts

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

@Component({
  selector: 'stream-cell-operator-basics',
  styleUrls: ['./stream-cell-operator-basics.component.css'],
  
  template: 
   `<button (click)="redButtonA$.next()">
      red
    </button>
    <button (click)="greenButtonA$.next()">
      green
    </button>
    <h1>lbl: {{ labelV$ | async}}</h1>`,

})
export class StreamCellOperatorBasicsComponent implements OnInit, OnDestroy{
  
  redButtonA$ = new Subject<void>();
  greenButtonA$ = new Subject<void>();
  
  labelV$ = new BehaviorSubject<string>('');

  red$: Observable<string>
  green$: Observable<string>
  color$: Observable<string>
  
  private unsub$ = new Subject<void>();

  constructor() {
    this.red$ = this.SButtonRed.pipe( map(u => 'red') );
    this.green$ = this.SButtonGreen.pipe( map(u => 'green') );
    this.color$ = merge(this.red$, this.green$);
  }

  ngOnInit(): void {
    this.color$.pipe(takeUntil(this.unsub$))
      .subscribe(this.labelV$);
  }
  
  ngOnDestroy(): void {
    this._unsubscribe.next();
    this._unsubscribe.complete();
  }

}