Sharing data between components in Angular 9

Question

I have a application with a custom library ( tools ) containing a number of components to be shared with other projects in the application (let's call one of them data-portal ).

For some context, in the data-portal app.component.html I have:

<div>
  ...
  <lib-primeng-menu-nav></lib-primeng-menu-nav>
  <router-outlet></router-outlet>
  ...
</div>

where the lib-primeng-menu-nav , from the tools library, contains the navigation for the project and router-outlet can show a few different views, one of which shows a number of charts with time series data (also from the tools library):

When a user clicks on the star icon at the bottom left of the charts, it should toggle that series from being included in an 'Analyzer' view, where multiple series can be drawn on a single chart for comparison. I have an Analyzer Service in tools meant to keep track of which series should be displayed in the Analyzer.

Back to the navigation bar, the link to the Analyzer should also display a counter of how many series have been selected:

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

And here is my issue: I can't get the counter to change. On initial load, the link shows as Analyzer (0) as it should, but whenever I click on one of the series to be added, the counter remains at 0. If I navigate to the Analyzer view, the display correctly shows the right series in the chart, but the navigation bar still shows (0) in the counter. All other behavior related to the analyzer view & service seems to work fine.

Here is what I have tried so far:

Method 1

analyzer.service.ts :

@Injectable({
  providedIn: 'root'
})
export class AnalyzerService {
  // Keep track of series in the analyzer
  public analyzerSeries = [];
  public analyzerData = {
    analyzerTableDates: [],
    analyzerSeries: [],
  };

primeng-menu-nav.component.ts

  constructor(
    private _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) { }
ngOnInit() {
    ...
    this.analyzerSeries = this._analyzerService.analyzerSeries.length;
    ...
  }

primeng-menu-nav.component.html

<nav id="sidebar-nav" class="navbar navbar-fixed-top navbar-light">
  ...
  <a routerLink="/analyzer">&nbsp; Analyzer ({{analyzerSeries}})</a>
  ...
</nav>

Method 2

analyzer.service.ts

  public analyzerSeries = [];
  private analyzerSeriesTest = new BehaviorSubject(null);
  analyzerSeries$ = this.analyzerSeriesTest.asObservable();
  ...
  updateAnalyzer(seriesId) {
    ...
    this.analyzerSeriesTest.next(this.analyzerSeries.length);
    ...
  }

primeng-menu-nav.component.ts

constructor(
    public _analyzerService: AnalyzerService,
    private route: ActivatedRoute,
    private _router: Router
  ) {
    this.analyzerSeriesCount = this._analyzerService.analyzerSeries$.subscribe((data: any) => {
      this.analyzerSeries = data;
    });
  }

Neither of these have worked. I've also tried using an EventEmitter instead of a Behavior Subject in the service for the component to subscribe to, and I'm hitting a wall. My hunch is that the service isn't being provided correctly, but I'm not completely sure. As I understand,

@Injectable({
  providedIn: 'root'
})

provides the service as singleton to be available throughout the app. I do not have the service listed as a provider in any of my modules.

Answer 1

Finally figured it out, so figured I'd post an answer in case. I had an extra 'ShareModule' in the tools library that I was importing to the data-portal app.module.ts to import the components. Just realized it was unnecessary since I could just import the tools.module.ts instead, and removing ShareModule from the imports fixed my issue with counter. Guess that caused in issue with providing the Analyzer service.