dart-lang/angular

@alexflav23 The approach that @jodinathan suggest could be summarized in the following example:

1. Create a service that emits events:

   class MessageService {
    final _newMessageCtrl = StreamController<String>();
   
    Stream<String> get onNewMessage => _newMessageCtrl.stream;
   
    void addMessage(String message) {
      _newMessageCtrl.add(message);
    }
   }

2. (optional) Inject the service in your main.dart (or other), so that it can be instantiated by the Angular DI:

   // main.dart
   @GenerateInjector([
    ...
    ClassProvider(MessageService),
   ])

3. Listen to the service events in your message handler component:

   @Component(...)
   class MessageComponent implements OnInit, OnDestroy {
   MessageComponent(this._messageService);
   
   final MessageService _messageService;
   
   StreamSubscription _serviceListener;
   
    @override
    void ngOnInit() {
      _serviceListener = _messageService.onNewMessage.listen(receivedMessage);
    }
   
    @override
    void ngOnDestroy() {
      _serviceListener?.cancel();
    }
   
    void receivedMessage(String message) {
        // do something with the message...
    }
   }

4. Register and place your message component somewhere that you want to be visible, for example in app_component.html:

   <router-outlet [routes]="Routes.all"></router-outlet>
   <message-component></message-component>

5. Call MessageService.addMessage() from anywhere to add new message.

   @Component(...)
   class OtherComponent() {
    OtherComponent(this._messageService);
   
    final MessageService _messageService;
   
    void someHandler() {
        _messageService.addMessage('Something...');
    }
   }

For simplicity I'm passing just a string, but you can use a wrapper object instead that could contains the message type (info, error, warning), auto hide duration, etc.

Skawa also has a Snackbar component that uses similar approach - https://github.com/skawa-universe/skawa_components/tree/master/skawa_material_components/lib/snackbar