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


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.


Thanks for asking.

There are a couple ways to do this.

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

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

  void cDidEvent() {

(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();

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

class C {
  final OnEvent _eventHandler;


  void onSomeAction() {

Answered By – matanlurey

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.