In my unique Angular 2 application, I am facing a challenge with the layout. The home page has a completely different layout compared to the rest of the app, which only share a navigation bar.
Here are some sample URLs:
http://localhost:4200/ <== home page layout
http://localhost:4200/cgu <== common nav page
http://localhost:4200/abc <== common nav page
Seeking guidance on the best approach to handle this issue, I attempted to implement a solution found on Stack Overflow :
How to switch layouts in Angular2
However, the solution did not work for me or maybe I made an error while adapting it to my scenario.
EDIT:
After trying various solutions, I decided to create a navigation service named navigation.service.ts
@Injectable()
export class NavigationService {
isHomePage: boolean;
}
In my home component file (home.component.ts):
@Component({
styleUrls: ['home.css'],
templateUrl: './home.component.html',
})
export class HomeComponent {
constructor(private navigationService: NavigationService) {
navigationService.isHomePage = true;
}
}
Within my app component file (app.component.ts), I attempted to access the value of isHomePage:
export class AppComponent {
constructor(private navigationService : NavigationService) {
console.log("HELLO");
console.log(navigationService.isHomePage);
if(navigationService.isHomePage)
console.log("HOME");
}}
The output shows that navigationService.isHomePage is currently undefined. Any idea what might be causing this issue?