2

I have a sidebar component that exists in most of my routes in the same place on the screen. I'd like to prevent it from re-rendering if it already exists in the previous route.

Solutions considered: I know that I can create an auxiliary route for this, but that creates a lot of lazy loading and route management issues for me. I'm using ngrx so I've also considered storing the state of the sidebar in the store, but there is a lot of data to manage, so I'd like to avoid that.

Is there a way to prevent a component from re-rendering if it exists in the previous route?

Nate May
  • 3,814
  • 7
  • 33
  • 86
  • I haven't tried but perhaps using a custom reuse strategy works for your situation as well http://stackoverflow.com/questions/33940095/angular2-routing-keeping-state-of-component-when-route-changes/36010817#36010817 – Günter Zöchbauer Feb 02 '17 at 06:34

1 Answers1

0

I am also using same sidebar component in one of my project. The way I handled it is to render only other components based on router changes and not header and sidebar component. This way you can tell your app to only render a part of your page (required component) and not the whole page.

The idea is to render only required component in and not other components which are static throughout the pages.

Following is how my app html looks:

 <div class="main-content">
  <div>
    <sidebar-component></sidebar-component>
  </div>
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

<div class="bottom-footer">
  <footer-component> </footer-component>
</div>

I hope this helps.

Jayant Pareek
  • 360
  • 3
  • 18