0

I have 2 modules: root module and module for authorization (lazy loaded). Root module has footer block, which I'd like to hide on "auth" route. I've tried to pass data through module routes such as: 

{path: 'auth', component: AuthComponent, data: {hideFooter: true}}

But root module component can't find the data, it always {}. I can get this data only in auth component. How can I do that, or there is another way to solve my problem?

Alexander Bondarenko
  • 77
  • 2
  • 11

3 Answers3

1

One way is to use different layout for root module and authcomponent.

to get data in auth component use 

  constructor(route: ActivatedRoute) {
    const hideFooter= route.snapshot.data.hideFooter;
  }
laiju
  • 1,353
  • 10
  • 17
0

For Angular 4, here you have the Angular Doc to solve your problem.

If you only want to comunicate two components see "component-interaction" in Angular doc.

In addition, here you have another similar problem that was solved.

victor_reiner
  • 107
  • 1
  • 8
0

A quick way will be to place an if condition in your app component 

<navbar></navbar>
<router-outlet></router-outlet>
<footer *ngIf="router.url !== 'auth'"></footer>

You also need to import router in your ts file

Or

app.component.ts

let routes = ['auth', 'someOther']
this.showFooter = routes.indexOf(this.router.url) < 0

Then your html becomes

<navbar></navbar>
<router-outlet></router-outlet>
<footer *ngIf="showFooter"></footer>
Manzur Khan
  • 2,366
  • 4
  • 23
  • 44
  • Yes, it's simple way, but what if you have another routes that should do the same? – Alexander Bondarenko Nov 28 '17 at 10:59
  • Since footer is used by it's selector tag and not a router outlet we can't use the proper way i.e [canActivate] As far as I know there are only two options, either to add footer tag separately in each component(that's a bit messy), or you escape all the routes by an if statement in your component, it's also messy but assuming you won't be having a huge list of routes that need to bypass the footer component. You can do this in ts file, add a list of route you want to escape and attach a boolean variable for it, and simply place that variable inside ngIf of footer in html – Manzur Khan Nov 28 '17 at 11:03
  • It's okay, but I think passing the data to the route is more comfortable way to do it, as example, what if the router name was changed, I should found it and edit that in the array too. – Alexander Bondarenko Nov 28 '17 at 11:13
  • You can refer for a better approach here: https://stackoverflow.com/questions/41972593/removing-header-and-footer-when-displaying-logout-page – Manzur Khan Nov 28 '17 at 11:19
  • ok, thanks, as I've understood, there is no the best practice – Alexander Bondarenko Nov 28 '17 at 12:52