How to properly use Angular2 to create independent components on the page?

Question

Angular

Please share advice or a link to the correct article on my question.
The point is - I want to use Angular2, but not as a whole application, but as separate widgets that can be crammed across the page. Found (and reproduced) an option when separate Modules are made and Bootstrap is launched for each element on the page. In this regard, everything is clear. But now the question has arisen how to manage these "widgets" from the outside (from the page itself). Let's say send an event to a widget, get/change data from a widget, run a method.
Here's an example: there is an authorization widget on the site in the header and in the body of the page itself there is the main application, also in Angular. When you log in (using the authorization widget), you need to force the main application to perform some action.
PS I have already read a lot of material and everywhere they write that the angular application should be monolithic and one per page. But the requirements are precisely to divide it into small components. In this regard, Vue works very "correctly", but the customer wants to cut the site to Angular2

Answer 1

You can write a provider that will send / receive messages through a global variable. observable interface?