Angular: Why are new subscriptions to NavigationService returning the initial BehaviorSubject value?

This question already has an answer here:

Angular2 sibling component communication, component not subscribing to service
(1 answer)

Closed 12 days ago.

I have a relatively simple Angular app where I use a service to pass values between components. The problem is that when I navigate to a new route and load a component that subscribes to the service, it always returns the initial value ("Home") from the BehaviorSubject instead of the current value that was set.

The main app.component contains a menu component and a router-outlet for loading other components based on the route when the user clicks a menu item. The menu component subscribes to the service and updates the current selected menu item correctly. However, other components subscribing to the same service always see the initial value.

The menu component:

TYPESCRIPTCopied
@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss'],
    providers: [MenuDatabase, NavigationService],
    standalone: false
})
export class MenuComponent implements OnInit {

  @Input() treeControl = new NestedTreeControl<MenuItem>(node => {
    return (node.models) ? node.models : node.actions;
  });

  public activeItem:  MenuItem | undefined;
  public versionList: Version[] = [];
  public menuItemList: MenuItem[] = [];
  public currentVersion: string = '';
  public isSearching: boolean = false;
  public searchForm = new UntypedFormGroup({ search: new UntypedFormControl('') });

  hasChild = (_: number, node: MenuItem) =>
    (!!node.models && node.models.length > 0) ||
    (!!node.actions && node.actions.length > 0);

  dataSource = new MatTreeNestedDataSource<MenuItem>();

  constructor(
    public router: Router,
    public menuService: MenuService,
    private navigationService: NavigationService,
    private database: MenuDatabase,
  ){
    navigationService.activeMenuItem$.subscribe(
      item => {
        this.activeItem = item;
      }
    )
  }

  ngOnInit(): void {

  }

  navigate(menuItem: MenuItem) {
    if(menuItem.models)
      this.router.navigate([`${this.currentVersion}/module/${menuItem.code}`], { state: { ep: menuItem } });
    if(menuItem.actions)
      this.router.navigate([`${this.currentVersion}/model/${menuItem.code}`], { state: { ep: menuItem } });
    if(!menuItem.actions && !menuItem.models)
      this.router.navigate([`${this.currentVersion}/action/${menuItem.code}`], { state: { ep: menuItem } });
    this.navigationService.setActiveMenuItem(menuItem)
}
}

NavigationService:

TYPESCRIPTCopied
@Injectable({
  providedIn: 'root'
})
export class NavigationService {

  private defaultItem = {
    title: "Home",
    code: "home"
  }
  // Observable string sources
  private activeMenuItemSource = new BehaviorSubject<MenuItem>(this.defaultItem);

  // Observable string streams
  activeMenuItem$ = this.activeMenuItemSource.asObservable();

  constructor(){
    }

  // Service message commands
  setActiveMenuItem(activeItem: MenuItem) {
    console.log("from: " + this.activeMenuItemSource.getValue().title + " | to: " + activeItem.title)
    this.activeMenuItemSource.next(activeItem);
  }
}

The console.log in the service shows the expected value change when setActiveMenuItem() is called from the menu component.

Component loaded upon navigation (ActionPageComponent):

TYPESCRIPTCopied
@Component({
    selector: 'app-action-page',
    templateUrl: './action-page.component.html',
    styleUrls: ['./action-page.component.scss'],
    standalone: false
})
export class ActionPageComponent implements OnInit {

  @Input() treeControl = new NestedTreeControl<MenuItem>(node => {
    return (node.models) ? node.models : node.actions;
  });

  @Input() menuItem: MenuItem;

    constructor(
    private activatedRoute: ActivatedRoute,
    private actionService: ActionService,
    private navigationService: NavigationService
  ) {
  };

  ngOnInit(): void {
    this.activatedRoute.url.subscribe(seg => {
      this.version = seg[0].path || '';
      this.level = seg[1].path || '';
      this.itemCode = seg[2].path || '';

      this.actionService.getAction(this.itemCode)
          .subscribe(data => {
            this.item = data
          })

    });

    this.navigationService.activeMenuItem$.subscribe(
      item => {
        console.log(item)
      }
    )
  }
}

The console log in ActionPageComponent always shows "Home" (the initial default value).

How can I get components loaded via router-outlet to subscribe to the NavigationService and receive the current value instead of the initial default?