How to display alert on app level from a child component

Question

I would like to have some rules or suggestions to be able to do this:

I have an alert on app level that I want to show when something is happening on one of my compo

Answer 1

I would do it with Observable and Subject. Basically you need a service injected in the shared module of those component so they share state.

The app (root) component will have a subscription on the public observable of the service. And every component will set the state through that service by calling the .next() on the subject. The observable will return the value of the subject.

You can check the code here: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

The idea is quite similar.