0

I am having a component which may have several child components at same level like

<parent>
  <input />
  <child>
    <input />
  </child>
  <child></child>
  <child></child>
</parent>

Either of child or parent may have input elements.

I am trying to get is if any of input element gets focus then its parent should get a call (other than manual). And if child component gets this info of input getting focus should be able to propagate it to parent without using EventEmitter.

I can use event emitter but if nesting of child increases then it would not be a good way. Can we do it more simpler?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
RateM
  • 241
  • 1
  • 4
  • 15

1 Answers1

0

Use:

@ViewChild in order to get reference to the Childs and access their data from the Parent.

@Input to pass data from the Parent to the Childs.

@Output in order to trigger events from the Childs to the Parent.

If you don't want to use @Output a workaround that you could use is RxJS BehaviorSubject (example here). Basically you emit values from the child using that BehaviorSubject and then you subscribe to those changes from the Parent.

Pedro Bezanilla
  • 1,167
  • 14
  • 22