How to encpsulate components (toolbars) content to prevent the component (toolbar) becomes a monolith?

I am in trouble with my toolbar code of my current app.

My toolbar covers the whole app. That means the toolbar is displayed at every page. Because of this the toolbar is only a part of my root template (app.component.html) and every other page (component) is lazy loaded by the router-outlet. The benefit is to avoid a whole DOM-update of my toolbar.

app.component.html:

<my-toolbar></my-toolbar>
<router-outlet></router-outlet> <!-- loads specific pages lazy -->

But now there is a big problem. The view content (icons, texts, margins, order, etc.) of my-toolbar.component.html is a little bit different on every page. The displayed data is handled by a service. So my toolbar component was became a very big monolith-like construct. In relation to the route there is a big switch case like procedure to find out which content is displayed in the toolbar ... :-(

My aim is to keep the general view content in my-toolbar.component.html and the specific view content should be "injected" with <ng-content> by the specific page. But I can use <ng-content> only if I put the <my-toolbar></my-toolbar> directly in an page template like:

<my-toolbar>
  <!-- specific content -->
</my-toolbar>

At the level of a lower level page component I am not able to access to the higher level toolbar component. Is there still a way to "inject" the specific content from a page component to the higher toolbar component? Note: I want to avoid CSS hacks like negative margin, positioning, etc.

I hope my bad English was understood. ó.Ò