Angular router - how to share parent route across multiple routing modules

Question

I created my Angular app with Angular CLI but now I have a problem with router. The app I want to build has some pages that have header and footer but also some pages that don't, like login page for example. So I need a way to share the layout with header and footer for the pages which need it and to use other layout for the ones that don't. What's the right approach for this?

My first idea was to have one route with header and footer which would be parent to all other routes which need it, but I can't find a way to share the same parent across multiple routing modules. The only way to specify parent child relation I was able to find in the docs is through a list of children when defining a route but then I need to have all the routes defined in the same place which I'd like to avoid.

Second idea was to use secondary routes and I tried with defining app.component.html with primary outlet for content and two secondary outlets for header and footer but then I wasn't able to access secondary outlet from the feature routing module.

Third idea was to have parent route with the same component for each page that has header and footer. That shared component would specify header and footer but the problem here is that then header and footer would be instantiated each time user navigates to a different feature so that would reset their state.

With ui-router I was using in AngularJS this was really easy to do with named views and ability to specify shared parent state. I'd really appreciate pointing in the right direction here.

Answer 1

Would something like this work?

-- App Component (with router outlet)

---- Parent component (with header, footer and child router outlet)

------ Child components to be displayed within the parent component's router outlet

---- Other components (such as the login with no header or footer)

Answer 2

You can subscribe to the router inside your footer component and just hide it based on the route.

1) the easiest hack-ish way would be to simply hide it

footer.component.ts

@HostBinding('style.display')
display :string = 'block';

constructor(private router: Router) {}

ngOnInit() {
  this.router.events.subscribe((val) => {

  if (val instanceof NavigationEnd) {
    this.display = 'block';
    if (val.url == '/hidefooterroute') {
      this.display = 'none';
    }
  }
 ...

2) Another way you can do this is to stick params in route.data and subscribe inside the main app or a service.

someRoutes = [
  { path:'awesome', data:{ showFooter: false, title: 'This is page is too awesome for a footer'}, loadChildren: "./awesome.module#awesomeModule" }  ];

...

this.router.events
  .filter(event => event instanceof NavigationEnd)
  .map(() => this.activatedRoute)
  .map(route => {
    while (route.firstChild) route = route.firstChild;
    return route;
  })
  .filter(route => route.outlet === 'primary')
  .subscribe((route) => {
    // do things with route
    route.data.subscribe((data) => {
      // do things with route data
      this.showFooter = data.showFooter;
    });
  });