Search code examples
angularangular-routingangular-module

Angular vary header and footer based on current module

Currently my app is fairly simple with only a single module, however I'm looking to expand it with an admin dashboard. From a high-level view, I'm planning on splitting into 2 modules: one for the client-facing site, and an authed lazy admin module like this: Client and admin module diagram

I'm hung up as to how I should setup the header and footer components for these two sections of the site. With a single-module, single-"section" website, it's fairly easy to have a uniform header and footer across the app by placing them in the app-component.html like so:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

My issue is that I want a different header and footer component when I'm in the admin section than when I'm on the "main" site.

I've been considering these ideas so far:

  1. Get an isLoggedIn boolean from an auth-service to vary the header and footer content based on site section.

    • This is fairly straight-forward, but feels like a hack and exposes code that I would prefer to be behind an auth guard.

  2. In each of the "view" components of the app, manually place in the app-header and app-footer components.

    • Again, this feels like a hack and would be tedious, but my app only really will have 5-10 separate view pages, so it could be manageable.

  3. Use 3 routing modules: a main-router, client-router, and admin-router. The main router would direct between a app-client-component and app-admin-component, with the template contents of each being essentially the above app-component.html, but the routers would be the client and admin routers respectively.

    • This feels like the best long-term solution, but I feel like there should be a simpler solution to this.

If anyone has experienced this issue before or has any insight into how I should structure this, it would be much appreciated!

Solution

  • You can create different layouts and reuse them. Your components will know nothing about header and footer - layout selection is in router config. See this link: https://medium.com/angular-in-depth/angular-routing-reusing-common-layout-for-pages-from-different-modules-440a23f86b57