Issue
I have a parent component with the following template:
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
<app-footer></app-footer>
How can I show or hide the app-sidebar
or app-footer
component based on the component routing through the router outlet? I have a boolean showSidebar
I'd like to use, with it's value set to true or false on each child component.
<app-sidebar *ngIf=showSidebar></app-sidebar>
Solution
In the app routes add a data property.
{ path: 'no-sidebar', component: NoSidebarComponent, canActivate: [AuthGuard], data: { showSidebar: false } },
and subscribe to the router events in the parent component like this
this.router.events.subscribe(event => {
if (event instanceof RoutesRecognized) {
const routeData = event.state.root.firstChild.data;
if (routeData) {
this.showSidebar = routeData.showSidebar === false ? false : true
}
}
}
Answered By - Mr. Stash
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.