How to display the data in the one of router in angular?

I have designed the router in the main component:

<div class="main-panel">
    <app-navbar></app-navbar>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

In the app-navbar there is a search box, and search result display at a component in the router-outlet. Problem is that I don't know how to pass the data to router-outlet from navbar component .

I even tried to import the component, but the router-outlet cannot auto refresh boolean changed.

Solution

One option is to build a service. [I provided several other options in my original answer ... but it was deleted by a moderator so I'm leaving those other options off.]

I worked up a stackblitz demonstrating how to use a service IN THIS SPECIFIC SCENARIO here: https://stackblitz.com/edit/angular-simpleservice-deborahk

NOTE: It does NOT require Subject or subscriptions

It provides a "header" component similar to your <app-navbar></app-navbar> with a search box. And a <router-outlet> with a component displaying the result of the search. (Though my specific example only shows the search text ... it could easily be extended to use that search text to display the search results.)

I hope it is of help to you!