PrimeNG Breadcrumbs with Material Design's Tabs - Breadcrumbs follow last Tab Component

Question

I'm trying to combine PrimeNG's Breadcrumbs (Here) and Material Design's Tabs (Here) using this tutorial. There were a few typos in it but I think I mostly got it working.

I have one set of tabs nested inside another (I know usually a no-no, but it is a long story). Ideally if they click on the second tab of the first level and then the second tab of the second level the desired outcome would be something like "Furniture>Tables" with the Tables component showing.

Right now the Breadcrumb always points to the last second-level component of the first first-level tab. For example:

Furniture | Tools | Paint

Tables | Chairs | Desks | Beds

In this case the breadcrumbs will ALWAYS point to Furniture > Beds. If I switch the code around to put desks lasts it will always point to desks. It is like when I click on the tabs the service isn't being triggered.

Where am I going wrong?

My code:

Service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { MenuItem } from 'primeng/primeng';

@Injectable()
export class BreadcrumbService {

    public breadcrumbItem: BehaviorSubject<MenuItem[]> = new BehaviorSubject<MenuItem[]>([]);
    private itemBreadcrumbs: MenuItem[];

  constructor() { }

      setBreadcrumbs(page: string) {
        this.itemBreadcrumbs = [];
        let refList: MenuItem[] = this.getBreadcrumbsLink(page);
        this.breadcrumbItem.next(refList);
    }

    private getBreadcrumbsLink(page: string): MenuItem[] {
        this.itemBreadcrumbs = [];

        switch (page) {
            case 'home':
                this.itemBreadcrumbs.push({ label: '' });
                break;
            case 'tables':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Tables' });
                break;
            case 'chairs':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Coating' });
                break;
            case 'desks':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Desks' });
                break;
            case 'beds':
                this.itemBreadcrumbs.push({ label: 'Furniture' });
                this.itemBreadcrumbs.push({ label: 'Beds' });
                break;
            default:
                this.itemBreadcrumbs = [];
        }
        return this.itemBreadcrumbs;    

     }

}

Home

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';
import { BreadcrumbService} from '../services/breadcrumb.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class homeComponent implements OnInit {

  objBreadcrumbs: MenuItem[];

    constructor(
        private breadcrumbService: BreadcrumbService) {
        this.objBreadcrumbs = [];
    }

  ngOnInit() {
        this.breadcrumbService.breadcrumbItem.subscribe((val: MenuItem[]) => {
            if (val)
                this.objBreadcrumbs = val;
        });
  }

}

Tables

import { Component, OnInit } from '@angular/core';
import { BreadcrumbService} from '../services/breadcrumb.service';

@Component({
  selector: 'app-tables',
  templateUrl: './tables.component.html',
  styleUrls: ['./tables.component.css'],
})

export class tablesComponent implements OnInit{


  constructor(
      private breadcrumbService: BreadcrumbService
    ) {
  }

    onSelect(event) {
    console.log(event);
  }

  ngOnInit() {
    this.breadcrumbService.setBreadcrumbs("tables");
  }

}