sharing context among components

src/main/webapp/app/dyn-tab/dyn-tab.component.html

@@ -1,6 +1,7 @@
 <!-- VEDI QUA:   https://angular.io/guide/class-binding  -->
 
 <div [hidden]="!active" [ngClass]="{ 'nav-link': true, active: active }">
+  <p>(siamo in {{ myCtx.name }})</p>
   <ng-content></ng-content>
   <ng-container *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ IHostingnode: dataContext }"> </ng-container>
 </div>

src/main/webapp/app/dyn-tab/dyn-tab.component.ts

@@ -1,5 +1,7 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IContextNode } from 'app/services/i-context-node';
+import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
 
 @Component({
   standalone: true,
@@ -7,11 +9,28 @@ import { CommonModule } from '@angular/common';
   selector: 'jhi-dyn-tab',
   templateUrl: './dyn-tab.component.html',
   styleUrls: ['./dyn-tab.component.scss'],
+  providers: [MockCtxloaderService],
 })
-export class DynTabComponent {
+export class DynTabComponent implements OnInit {
   @Input() tabTitle: string | undefined;
   @Input() active = false;
   @Input() isCloseable = false;
   @Input() template: any;
   @Input() dataContext: any;
+  //TODO: IMPORTARE LA RADICE COME UN PARAMETRO INIETTATO DA PARENT
+  @Input() myCtx: IContextNode; //from parent
+
+  nestedContexts: IContextNode[] | any;
+
+  constructor(private myContextService: MockCtxloaderService) {
+    this.myCtx = {} as IContextNode;
+  }
+
+  ngOnInit(): void {
+    this.myContextService.getData().subscribe(res => {
+      this.nestedContexts = res;
+      //inizializzo il contesto alla radice
+      this.myCtx = this.nestedContexts[0];
+    });
+  }
 }

src/main/webapp/app/dyn-tabs/dyn-tabs.component.ts

@@ -10,6 +10,7 @@ import {
   OnChanges,
   SimpleChanges,
   Input,
+  Output,
 } from '@angular/core';
 
 import { DynTabsDirective } from 'app/dyn-tabs.directive';
@@ -34,6 +35,7 @@ export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
 
   @ContentChildren(DynTabComponent) tabs: QueryList<DynTabComponent>;
   @ViewChild(DynTabsDirective) tabscontainer: DynTabsDirective;
+  //@Output() contextEmitter = new EventEmitter();
 
   nestedContexts: IContextNode[] | any;
 
@@ -48,6 +50,7 @@ export class DynTabsComponent implements AfterContentInit, OnInit, OnChanges {
       this.nestedContexts = res;
       //inizializzo il contesto alla radice
       this.myCtx = this.nestedContexts[0];
+      //this.contextEmitter.emit(this.myCtx);
     });
   }
 

src/main/webapp/app/tab-items/list-screen.component.ts

@@ -41,20 +41,26 @@ export class ListScreenComponent implements OnChanges, OnInit {
       		
     	});
     	*/
+    //const uid = this.myCtx.id;
+    // eslint-disable-next-line no-console
+    //console.log('---- UID DA PARENT X REST...' + uid);
+
+    //TODO: qui deve prendere i dati dal rest con l'ID passato dal contesto
+
     this.myServiceTable.getHostingNodes().subscribe(res => {
       this.dataSource = res;
     });
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    // eslint-disable-next-line no-console
+    console.log('---NELLA ONCHANGES...' + this.myCtx.name);
     for (const propName in changes) {
       if (propName === 'myCtx') {
         const param = changes[propName];
         this.myCtx = <IContextNode>param.currentValue;
         //controllo che l'oggetto non sia vuoto
         if (Object.keys(this.myCtx).length !== 0) {
-          // eslint-disable-next-line no-console
-          console.log('+++++++CONTESTO PRESO DAL PARENT...' + this.myCtx.name);
           //mt qui va passato il parametro myCtx.id al rest
           this.myServiceTable.getHostingNodes().subscribe(res => {
             this.dataSource = res;

src/main/webapp/app/tabbed-page/tabbed-page.component.html

@@ -5,7 +5,7 @@
   <div class="col-md-9">
     <div class="row">
       <jhi-dyn-tabs [myCtx]="currentNodeCtx">
-        <jhi-dyn-tab [tabTitle]="'Lista'">
+        <jhi-dyn-tab [tabTitle]="'Lista'" [myCtx]="currentNodeCtx">
           <jhi-list-screen (jsonEmitter)="onViewRawJson($event)"></jhi-list-screen>
         </jhi-dyn-tab>
       </jhi-dyn-tabs>