I have a situation where I have one component that needs to pass data to another component located in a different module. The app.component acts as the parent of these child modules. However, they are only connected through routing, so they are not technically parent and child components.
My template for the app.component is structured like this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a routerLink="link1" routerLinkActive="active">Page1</a></li>
<li><a routerLink="link2" routerLinkActive="active">Page2</a></li>
<li><a routerLink="link3" routerLinkActive="active">Page3</a></li>
<li><a routerLink="link4" routerLinkActive="active">Page4</a></li>
</ul>
</div>
</nav>
<div *ngIf="needsSidebar" id="sidebar">some content</div>
<div>
<router-outlet></router-outlet>
</div>
Since app.component is not directly linked to these modules and their components, I attempted to use Output but it failed due to them being from different modules. I am unsure of how to proceed. I want the "children" modules to communicate with the app.module to indicate if they require a sidebar and what content it should display. How can I achieve this?