Linked breadcrumbs model with process model, in order that for every process there is an array of breadcrumbs

src/app/components/breadcrumbs/breadcrumbs.component.ts

@@ -3,6 +3,7 @@ import { AppState } from 'src/app/app.state';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
+import { Process } from 'src/app/core/models/process.model';
 
 @Component({
   selector: 'app-breadcrumbs',
@@ -11,15 +12,22 @@ import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
 })
 export class BreadcrumbsComponent implements OnInit {
 
-  breadcrumbsObs: Observable<Breadcrumb[]>;
+  processesObs: Observable<Process[]>;
   breadcrumbs: Breadcrumb[];
   constructor(private store: Store<AppState>) {
-    this.breadcrumbsObs = store.select('breadcrumbs');
-    this.breadcrumbsObs.subscribe(
-      (data: Breadcrumb[]) => this.breadcrumbs = data
+    this.processesObs = store.select('processes');
+    this.processesObs.subscribe(
+      (data: Process[]) => this.getBreadcrumbsFromCurentProcess(data)
     );
   }
 
+  getBreadcrumbsFromCurentProcess(processes: Process[]) {
+    const currentProcess = processes.find(p => p.selected === true);
+    if (currentProcess) {
+      this.breadcrumbs = currentProcess.breadcrumbs;
+    }
+  }
+
   ngOnInit() {
   }
 

src/app/components/process-header/process-header.component.ts

@@ -5,6 +5,7 @@ import { AppState } from 'src/app/app.state';
 import { Observable, of } from 'rxjs';
 import { reduce } from 'rxjs/operators';
 import { ADD_PROCESS } from 'src/app/core/actions/process.actions';
+import { Breadcrumb } from 'src/app/core/models/breadcrumb.model';
 
 @Component({
   selector: 'app-process-header',
@@ -37,7 +38,11 @@ export class ProcessHeaderComponent implements OnInit {
       payload: <Process>{
         id: itemNo,
         name: '# ' + itemNo,
-        selected: this.processes.length === 0 ? true : false
+        selected: this.processes.length === 0 ? true : false,
+        breadcrumbs: <Breadcrumb[]>[{
+          name: 'Artikelsuche',
+          path: '/article-search'
+        }]
       }
     });
   }

src/app/core/models/process.model.ts

@@ -1,5 +1,8 @@
+import { Breadcrumb } from './breadcrumb.model';
+
 export interface Process {
     id: number;
     name: string;
     selected: boolean;
+    breadcrumbs: Breadcrumb[];
 }