Using EventEmitter as Input() in Angular Component

Question

I have 2 components b,c on the same level contained in a

a
 b
 c

c has raises events using EventEmitter eC in Output() that I want to consume in b. As I cannot "directly" feed that to b, I "redirected" those events by creating another EventEmitter eA that lives in a, that just replays incoming events eC. Then I pass this EventEmitter as an Input() to b:

//b
  @Input() public reloadRequested: EventEmitter<void>;
  ngOnInit() {
    this.reloadRequested.subscribe(() => {
...
    });
  }

Is there anything wrong this approach? I was wondering because I basically did not find anything during my online researches. How would you do this otherwise?

UPDATE: I don't want to pass data to a component but an event. Using the Input() Decorator, referencing an EventEmitter of the parent component, seems to be the obvious way for me.

Answer 1

The usual way of doing this is, with keeping the rest of the setup the same (component C emits events, parent A handles the events), is: patch values (not event emitter/observable) as input to component B, and in B either use ngOnChanges hook or a setter input:

ngOnChanges(changes: SimpleChanges): void {
    if (changes.someInput) {
// do stuff with this.someInput
    }
}

or

@Input set() someInput (value: any) {
// do stuff with `value`
}

MAJOR EDIT: but considering that C isn't emitting any values that we care about, we care only about the fact of emission itself, this isn't the right pattern. Your approach with observable input is sound, just a small improvement: the parent doesn't actually have to do anything, certainly not create another observable. All the necessary building blocks are there, just glue them together in the template:

<app-c #thatButton></app-c>
<app-b [foo$]="thatButton.foo"></app-b>

Stackblitz:

https://stackblitz.com/edit/angular-simple-changes-utvl61?file=src%2Fapp%2Fb%2Fb.component.ts

Answer 2

From the docs

Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance. EventEmitter

also

Extends RxJS Subject for Angular by adding the emit() method. EventEmitter

So it really looks like the are just a Subject with only one purpose: Output data from a component so i would use them just for this.

I usually subscribe the eventEmitter in the parent, store the data in a variable and send it to the Input of the other child components.

Everything should refresh automatically.