How to hide my left nav menu only on certain pages

Question

I am working on a angular5/html 5 project. I have a side-nav-menu component that displays on all the pages of my app. The thing is that this side-nav-menu component is dynamic and automatically updates if any more pages are added in the app.

Now what i want to do is hide this menu only on certain pages. for example i want to remain visible on page 1-5, hidden on page 6-8 and again visible on 9 and 10. How should i do this?

This is my edited html code for side-nav-menu:

<aside>
  <div class="sidebar">
    <nav>
      <div class="sidebar__wrap">

        <ol class="left-nav">
        </ol>
      </div>
    </nav>
  </div>
</aside>

Zachscs · Accepted Answer · 2018-08-30T18:57:30.860

10

See How to get current route You can read the route from the Router object from the parent component of the sideNav or in sideNav itself and *ngIf on the template:

constructor(router: Router) {
  router.events.subscribe(event => {
    if (router.url === 'SOMEROUTE') {
      this.showSideNav = false;
    }
  }
}

then set *ngIf on your side nav to showSideNav.

edited Aug 30 '18 at 18:57

answered Aug 30 '18 at 18:52

Zachscs

3,353
7
27
52

SiddAjmera · Answer 2 · 2018-08-30T19:30:58.363

Looks like a suitable case for a Shell Component. You can create one that is going to shell the whole area of your App. In this you can have a <router-outlet></router-outlet> which is going to host all the pages without the side-nav.

And for the pages that you want to have a side-nav, you can create a parent route(say /app) and then in its children define the routes for the pages that you want to have the side-nav.

So your routeConfig would look something like:

const APP_ROUTES: Routes = [
  { path: '6', component: Component6 },
  { path: '7', component: Component7 },
  { path: '8', component: Component8 },
  { path: 'app', component: ComponentApp, children: [
    { path: '1', component: Component1 },
    { path: '2', component: Component2 },
    { path: '3', component: Component3 },
    { path: '4', component: Component4 },
    { path: '5', component: Component5 },
    { path: '9', component: Component9 },
    { path: '10', component: Component10 },
  ]}
];

Now, in the AppComponent's template, add a <router-outlet></router-outlet>. This is supposed to load ComponentApp, Component6, Component7, and Component8. And then there would be ComponentApp that will have the side-nav and below that, another <router-outlet></router-outlet> that is going to load Component1-Component5, Component9 and Component10.

Just one thing that is going to be an issue in your case would be, you'll have to consider the children components to be under a sub-route.

Deborah Kurata has a very interesting NGCONF Talk about this and several other router related concepts that I suggest you watch to get a better understanding.

But sir, this will add '/app' in the url. How about defining a separate JSON of routing with extra true/false field to routes which can be used in ngClass for handling show hide with css? — yogesh vaidya, Aug 30 '18 at 19:35
@yogeshvaidya, please consider creating a StackBlitz with your approach. I'm pretty sure that would work too. But I personally feel this as a cleaner approach. — SiddAjmera, Aug 30 '18 at 19:39

How to hide my left nav menu only on certain pages

2 Answers2