Apologies for the unconventional title. I struggled to come up with a better one.
My goal is to develop an application with a simple 3-part structure (header / content / footer). The header should change based on the active route, where each header is a separate component. Currently, the header display is controlled by an [ngSwitch] statement in the "mainApp.component" as follows:
<span [ngSwitch]="currentLocation">
<span *ngSwitchWhen="'/login'"><login-header></login-header></span>
<span *ngSwitchWhen="'/home'"><home-header></home-header></span>
</span>
<div class="content"><router-outlet></router-outlet></div>
<app-footer></app-footer>
The code snippet above showcases how the "mainApp.component.ts" file manages the current location and displays the appropriate header depending on the active route. However, a challenge arises when changing routes programmatically, such as through a button click using:
<span class="btn btn-default headerButton homeButton" (click)="navigateToHome()"></span>
In this scenario, even though we update the route to "/home", the header does not refresh due to a lack of proper change detection in the mainApp.component.
One potential solution could be moving the header logic into each respective component's template, although I would prefer to keep it centralized in the main component if possible.
If anyone has any insights on improving this setup or knows of a best practice approach to address this issue, your input would be greatly appreciated.
Thank you.