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

Question

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 eve

Answer 1

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: '',
)
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: '',
  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();
  }
}