0

I have a Angular Parent Component with tox Child Component. I want to share a variable between the two child and I configure this :

Parent

TypeScript

@Component({
  selector: 'jhi-saison-dashboard',
  templateUrl: './saison-dashboard.component.html',
})
export class SaisonDashboardComponent {

  saisonSelectionnee?: ISaison;

  evenementDeTopheader(saisonRetourneeParTopHeader: ISaison): void{
    this.saisonSelectionnee = saisonRetourneeParTopHeader;
  }

  evenementDeOption(saisonRetourneeParOption: ISaison): void{
    this.saisonSelectionnee = saisonRetourneeParOption;
  }
}

HTML

  <div>

    <!--    Bandeau contenant la liste des saisons et les boutons de gestions-->
    <jhi-saison-dashboard-top-header
      [saisonSelectionnee]="saisonSelectionnee"
      (emitEvent)="evenementDeTopheader(saisonSelectionnee!)">

    </jhi-saison-dashboard-top-header>

    <!-- Zone de gestion du paramétrage des jours/mois autorisés -->
    <jhi-saison-dashboard-option
      [saisonSelectionnee]="saisonSelectionnee"
      (emitEvent)="evenementDeOption(saisonSelectionnee!)">
    </jhi-saison-dashboard-option>

  </div>

CHILD (same for Both)

Typescript

@Component({
  selector: 'jhi-saison-dashboard-top-header',
  templateUrl: './saison-dashboard-top-header.component.html',
})
export class SaisonDashboardTopHeaderComponent implements OnInit {
  saisonIdActive?: number;
  saisonIdSelectionnee?: number;
  @Input() saisonSelectionnee?: ISaison;
  @Output() emitEvent = new EventEmitter<ISaison>();

  constructor(protected saisonService: SaisonService) {
  }

  /**
   * Gestion des changements de saisons dans la liste déroulante
   */
  changementSaisonDansListe(): void {
    delete this.saisonSelectionnee;
    if (this.saisonIdSelectionnee) {
      this.saisonService.find(this.saisonIdSelectionnee).subscribe(
        res => {
          res.body ? this.saisonSelectionnee = res.body : delete this.saisonSelectionnee
          this.emitEvent.next(this.saisonSelectionnee);
        }),
        () => {
          // TODO : Gestion Erreur Subscribe
        }
    }
  }
}

In the child, on the line with "this.emitEvent.next(this.saisonSelectionnee);", variable saisonSelectionee contain a object,

But when I'm return on the parent in the méthod "evenementDeTopheader", saisonRetourneeParTopHeader is null. Do you know why ?

EDIT 1 The console LOG : enter image description here

Broshet
  • 55
  • 1
  • 9
  • Can you verify `this.saisonService.find(this.saisonIdSelectionnee).subscribe` your subscribe success is being hit? do a console log on the success and error paths. Double-check, where you're importing for the `EventEmitter`, is coming from, maybe you're importing some other libraries EventEmitter. – Jessy Aug 19 '21 at 11:36
  • Thanks Jessy, The subscribe is on success and return data (I have add some console Log in the subject). (PS : emit is on Next statement of subscribe) Can you explain what you think about importing `EventEmitter` ? In my child, I use this : `import { EventEmitter} from '@angular/core';` – Broshet Aug 19 '21 at 11:48
  • I think it's OK, with this url https://stackoverflow.com/questions/41954484/how-can-i-communicate-between-two-child-components-in-angular I found that I should use `$event` in the HTML parent component ... – Broshet Aug 19 '21 at 12:01
  • That's correct, I've seen EventEmitter get imported from different libraries before which causes some strange behaviors (since its not angular's) The rest looks alright at first glance. Maybe the use of `!` in your event binding but I don't see why that would be an issue.. – Jessy Aug 19 '21 at 12:04

0 Answers0