AngularDart: How do you pass an event from a Child component to a second level parent

Issue

I am using StreamControllers with Events, and essentially I have a 3 level component heirarchy lets call them, A,B,C. The heirarchy is A -> B -> C.

The origin of the event is in c and i want the event to be processed by A.

I know this is rather easy to do with a direct parent -> child relationship using @Output but not sure how to properly handle multiple levels upwards.

Solution

Thanks for asking.

There are a couple ways to do this.

(1) Create an event handler in B that forwards from C

@Component(
  selector: 'b',
  directives: const [C],
  template: '<c (event)="cDidEvent()"></c>',
)
class B {
  final _onEvent = new StreamController();
  Stream get onEvent => _onEvent.stream;

  void cDidEvent() {
    _onEvent.add(null);
  }
}

(2) Use dependency injection.

This requires deeper coupling between components, so it won’t be appropriate for all designs, but it could make sense in some scenarios.

abstract class OnEvent {
  /// Called when an event happens.
  void onEvent();
}

@Component(
  selector: 'a',
  directives: const [B],
  template: '<b></b>',
  providers: const [
    const Provider(OnEvent, useExisting: A),
  ],
)
class A implements OnEvent {
  @override
  void onEvent() {
    print('>>> An event was triggered!');
  }
}

class C {
  final OnEvent _eventHandler;

  C(this._eventHandler);

  void onSomeAction() {
    _eventHandler.onEvent();
  }
}

Answered By – matanlurey

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.