sidebar.component.ts

import { Component } from '@angular/core';
import { SharedData } from '../shared-data';

@Component({
  selector: 'app-sidebar',
  template: `
    Item count: <span>{{ getItemCount() | async }}</span>
  `
})
export class SidebarComponent {
  constructor(private sharedData: SharedData) { }

  getItemCount() {
    return this.sharedData.value.map(d => d.items.length);
  }
}