Angular template doesn't update my variable when it changes

Question

I have an array called history that gets updated from my background script in my chrome extension, I want to show in real time how many "types 1" it's getting while I run the script and show it in my popup, this is how I am handling it in my .ts file

  history: Report[] = [];
  classOne = 0;
  
  classOneSubject = new BehaviorSubject(this.classOne);
  classOneObs = null;

  constructor() { }

  ngOnInit(): void {
    chrome.storage.onChanged.addListener((changes, area) => {
      if (area === 'sync' && 'history' in changes) {
        this.history = changes.history.newValue;
        this.classOneSubject.next(this.history.filter(e => e.ctype === 1).length);
        this.classOneObs = this.getClassOneTypes();
      }
    });
  }

  getClassOneTypes(): any {
    return this.classOneSubject.asObservable();
  }

And this is from my popup

<em class="stat mt-3 mb-1">{{classOneObs | async}}</em>

However it's not updating the values in real time, for some reason, it only shows new values whenever I press a button/link, even if these perform no actions, which is weird and I don't understand why it happens. What am I doing wrong?

Answer 1

Try manually running change detection.

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) { }

  ngOnInit(): void {
    chrome.storage.onChanged.addListener((changes, area) => {
      if (area === 'sync' && 'history' in changes) {
        this.history = changes.history.newValue;
        this.classOneSubject.next(this.history.filter(e => e.ctype === 1).length);
        this.classOneObs = this.getClassOneTypes();
        this.changeDetectorRef.detectChanges();  // Add this line.
      }
    });
  }