title: Ionic 3: hide ion-footer on login page
body: <p>I have cloned the side-menu startproject and have this structure on my <strong>app.html</strong>:</p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
    &lt;ion-header&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-title&gt;Menu&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
  
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"&gt;
          {{p.title}}
        &lt;/button&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  
  &lt;/ion-menu&gt;
  
  &lt;ion-footer&gt;
    &lt;ion-toolbar&gt;
          MYFOOTER
    &lt;/ion-toolbar&gt;
  &lt;/ion-footer&gt;
  
  &lt;!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus --&gt;
  &lt;ion-nav [root]="rootPage" #content swipeBackEnabled="false"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p>I would like to be able to hide the footer on my login page, I tried these two things:</p>
  
  <ol>
  <li><p>I created a variable on the Login Controller but the <em>ion-footer</em> is outside <em>ion-content</em> so I cannot access this variable (even with dot notation)</p></li>
  <li><p>I created an external service with <em>global variables</em> and tried to access it from the footer but I wasn't able to</p></li>
  </ol>
  
  <hr>
  
  <h3>1. Trying to access the variable of the LoginController</h3>
  
  <p><strong>login.ts</strong></p>
  
  <pre><code>...imports...
  
  export class LoginPage {
  
      public login_data : any = {footerIsHidden: true}; 
  
      ...constructor &amp; other stuff...
  }
  </code></pre>
  
  <p><strong>app.html</strong></p>
  
  <pre><code>... 
  &lt;ion-footer *ngIf="!login_data.footerIsHidden" class="footer"&gt;
      MY FOOTER
  &lt;/ion-footer&gt;
  ...
  </code></pre>
  
  <p>I get an "<em>Cannot read property 'footerIsHidden' of undefined</em>" because I can't access the variable <strong>login_data</strong> on the <strong>ion-footer tag</strong></p>
  
  <h3>2. Create a service to manage global data</h3>
  
  <p>I create this service <strong>global-data</strong>:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  @Injectable()
  export class GlobalDataService {
    public data:any = {};
  }
  </code></pre>
  
  <p>I added it to my <strong>app.module.ts</strong>:</p>
  
  <pre><code>import { GlobalDataService } from '../services/global-data/global-data';
  @NgModule({
    declarations: [
      ...
    ],
    imports: [
      ...
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      ...
    ],
    providers: [
      ...
      GlobalDataService, &lt;--- HERE
      {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
  </code></pre>
  
  <p>And I also added it on <strong>main.ts</strong>:</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { GlobalDataService } from '../services/global-data/global-data';
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule, [GlobalDataService]);
  </code></pre>
  
  <p>I read the last part was needed so the same service instance can be accessed anywhere. </p>
  
  <p>If I inject the service on the <em>LoginController</em> I can set and get information there but again, I cannot access this service from the footer.</p>
  
  <hr>
  
  <ul>
  <li>Which is the best workaround for this ?</li>
  </ul>