Behaviorsubject not updating variable

Ionic Framework
1

A parent component contains a header component and content component. The header calls a behaviorsubject service to set a variable, and the content one should display the variable. This isn’t working (changing the variable via the header doesn’t update the variable in the content).

The filter service…

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class FilterService {
  private filter:BehaviorSubject<string>;

  constructor() {
    this.filter = new BehaviorSubject<string>('');
  }
  
  setFilter(flt: string): void
  {
    this.filter.next(flt);
    console.log('filter set to ', flt);
  }

  getFilter()
  {
    return this.filter.asObservable();
  }
}

The header code …


// ... other stuff
import { FilterService } from '@app/services/filter/filter.service';
  constructor(
    private filterService: FilterService) { }

// Called when you set the value of the variable
  filter(flt: string)
  {
    this.filterService.setFilter(flt);
console.log(flt);
  }

the content file


import { FilterService } from '@app/services/filter/filter.service';
// ... other stuff

  public thefilter = '';

constructor(
    private filterService: FilterService){}

  ngOnInit() {   
    this.filterService.getFilter().subscribe((val)=>{this.thefilter=val});
// this.thefilter doesn't update. Why???
// ...

Anything wrong with this code? Any suggestions?

2

mind throwing together a minimal project we can clone and test? Snippets don’t really tell the whole story