WithObservable

with-observable.ts

import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { ReRenderOnChange, SetChecker, WithObservable } from '@intelligo.ai/bonfire';


@ReRenderOnChange()
@Component({
  selector: 'app-test',
  styles: [
    `
    .container {
      margin: 1rem;
      color: white;
    }
  `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
  <div class="container">
    <button (click)="initRandomNumber()">
    <h1>{{ (changed$ | async).showChange ?  (changed$ | async).changeText : 'Start' }}</h1>
    </button>
  </div>
`,
})
export class TestComponent implements OnInit {
  @WithObservable() changed = {
    showChange: false,
    changeText: ''
  }; changed$: BehaviorSubject<any>;

  constructor(
    private cd: ChangeDetectorRef
  ) { }

  ngOnInit() {

  }


  initRandomNumber() {
    setTimeout(() => {
    
      this.changed.showChange = true;
      this.changed.changeText = 'New text WOW!';

    }, 2200);
  }

}