Why is my Event Emitter not catching observables?

Question

I created a ComponentMessengerService that uses an Event Emitter to allow for communication between two child components. The input component is supposed to send information to the output component via the use of an injected service in its constructor.

An Epic is just a custom model I have made.

Component messenger service source code:

@Injectable({
  providedIn: 'root'
})
export class ComponentMessengerService {
  epicNumberUpdated = new EventEmitter<string>();
  epicTitleUpdated = new EventEmitter<string>();
  epicListUpdated = new EventEmitter<Epic[]>();

  sendEpicNumber(epicNumber: string){
    this.epicNumberUpdated.emit(epicNumber);
  }

  sendEpicTitle(epicTitle: string){
    this.epicTitleUpdated.emit(epicTitle)
  }
  
  sendEpicList(epicList: Epic[]){
    this.epicListUpdated.emit(epicList)
  }
}

Output component source code:

export class OutputComponent implements OnInit {

  public epicTitle: string;
  public epicNumber: string;
  public epicList: Epic[] = [];

  constructor(private componentMessenger: ComponentMessengerService) {
    this.subscribeAll();
  }

  subscribeAll(){
    this.componentMessenger.epicListUpdated.subscribe(
      (epicList: Epic[]) => {
        this.epicList = epicList; })
    this.componentMessenger.epicTitleUpdated.subscribe(
      (epicTitle: string) => { this.epicTitle = epicTitle })
    this.componentMessenger.epicNumberUpdated.subscribe(
      (epicNumber: string) => {
        this.epicNumber = epicNumber; })
  }
}

The output's properties are data-bound to html elements and should be displayed once the component's properties have received the observables. I have debugged my application and can confirm that the input component is indeed sending the observables. Unfortunately, when I tried adding console.log() statements within the subscribeAll() to verify whether the event emitters were receiving any data, the line of code was never executed.

“ communication between two child components..” - are these sibblings..? — MikeOne, Aug 12 '22 at 15:51
Yes, they belong to the same parent component. In addition, I have another parent component with a similar setup where the sibling components also use the same service and it works just fine. — liberlux, Aug 12 '22 at 16:02

Yazan Al-Zebak · Answer 1 · 2022-08-12T15:30:21.697

0

did you try to call the subscribeAll() method in the ngOnInit ?

Difference between Constructor and ngOnInit

Update

I would solve the problem by using "Subject" instead of EventEmitter, I think EventEmitter need to work with @Output().

edited Aug 12 '22 at 15:30

answered Aug 12 '22 at 15:15

Yazan Al-Zebak

21
4

I have tried it with both, actually. – liberlux Aug 12 '22 at 15:20
I would solve the problem by using "Subject" instead of EventEmitter, I think EventEmitter need to work with @Output – Yazan Al-Zebak Aug 12 '22 at 15:29

score 0 · Answer 2 · answered Aug 14 '22 at 18:04

We have Subject and BehaviorSubject for it.

@Injectable({
  providedIn: 'root'
})
export class ComponentMessengerService {
  epicNumberUpdated$ = new Subject<string>();
  epicTitleUpdated$ = new Subject<string>();
  epicListUpdated$ = new Subject<Epic[]>();

  sendEpicNumber(epicNumber: string): void {
    this.epicNumberUpdated$.next(epicNumber);
  }

  sendEpicTitle(epicTitle: string): void {
    this.epicTitleUpdated$.next(epicTitle)
  }
  
  sendEpicList(epicList: Epic[]): void {
    this.epicListUpdated$.next(epicList)
  }
}

And don't forget about the unsubscription from Observables, because you can have a memory leak.

export class OutputComponent implements OnInit, OnDestroy {
  epicTitle: string;
  epicNumber: string;
  epicList: Epic[] = [];

  private unsubscribe$ = new Subject<void>();

  constructor(private componentMessenger: ComponentMessengerService) {}

  ngOnInit(): void {
    initializeListeners();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  private initializeListeners(): void {
    this.componentMessenger.epicListUpdated$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((epicList: Epic[]) => {
        this.epicList = epicList;
      });

    this.componentMessenger.epicTitleUpdated$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((epicTitle: string) => { 
        this.epicTitle = epicTitle;
      });

    this.componentMessenger.epicNumberUpdated$
      .pipe(takeUntil(this.unsubscribe$))
      .subscribe((epicNumber: string) => {
        this.epicNumber = epicNumber;
      });
  }
}

Why is my Event Emitter not catching observables?

2 Answers2