SOLVED
I am faced with a challenge involving multiple components in Angular2. Specifically, I have the following components: home component, default header, detail component, and detail header component. Each header has a unique layout.
At the Home page, the 'Default header' is displayed. However, when a user navigates to the Detail Page, the 'Detail Header' should be shown instead.
My initial logic was to use an if else statement in the app.component.ts file to achieve this toggle functionality. Unfortunately, the headers are not switching as expected.
Can anyone provide guidance on how to properly implement this feature in Angular2? I seem to be struggling with adapting the headers based on the current page.
Below is the snippet from my app.component.ts:
@Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
styleUrls: ['./main.css'],
template: `
<div class="main-body">
<app-header *ngIf="!showHeaderB()"></app-header>
<detail-header *ngIf="showHeaderB()"></detail-header>
<div class="container">
<small><api-error></api-error></small></div>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
<template ngbModalContainer></template>
</div>
`
})
export class AppComponent {
showHeaderB(){
if (this.router.url.startsWith('/detail/')) {
return true;
} else {
return false;
}
}
}