Add a global component (show on every page)

Ionic Framework ionic-v3
1

I built a component that uses the Network plugin to tell the user if they go offline.
This is something we would like to have show up on every page.

I can’t seem to find a good global place for this. Doesn’t work in index.html because it would be outside of the app that is rendered.

I tried to put it in app.html. It doesn’t seem to matter where I put it in this file, I can see the code is getting generated but chrome is telling me that its in the same place as the nav bar thing at the top. Nothing is seen on the page.

Any idea?

1 Like
2

Hello,

In terms of Typescript code for Ionic, you usually put that into a provider. If you are familiar with php coding, it comes to put your main classes into a provider that is called at every .ts page you need.

Command is uber simple, just do ionic generate provider myfactory. Then you’ll call this provider with classes and functions every time you need. Exactly like an include in PHP.

If you really really need to force it every page, then this provider can be hardcoded into app.component.ts, but it’s not really manageable in the long run. There is also the @injectable way, but again not very manageable.

Have fun with Ionic,

3

put it(your custom component) on every page or in your root page. translate it with css/scss that it appears on the right position.

My Offline-Component as example: (I have it on every of my root tab pages)

import { Component, NgZone} from '@angular/core';
import { Status } from 'customNPMmodule';
import { Events } from 'ionic-angular';

@Component({
  selector: 'offline-banner',
    template:'<div id="box" class="margin" *ngIf="offline" [ngClass]="fadein"><b>{{ "connection.offlineBanner" | translate }}</b><div>'
})
export class OfflineBanner {

  public offline:boolean;
  private offlinesub:any;
  public fadein:string="";
  constructor(private events: Events, private zone: NgZone) {
    this.offline=!Status.get("isConnected");

    this.offlinesub=this.events.subscribe("StatusChange:isConnected", () => {

      this.zone.run(()=>{
        this.offline=!Status.get("isConnected");
        this.fadein="fadein";
        setTimeout(()=>{
          this.fadein="";
        },2300)
      });
    });
  }

  getOfflineState(){
    return this.offline;
  }

  ngOnDestroy() {
    if(typeof(this.offlinesub)!="undefined"){
      this.offlinesub.unsubscribe();
    }
  }

}

and the scss:

offline-banner {
  #box {
    z-index: 6;
    position: absolute;
    width: 100%;
    opacity: 0.6;
    background: #8c8787;
    text-align: center;

  }
  .fadein{
    animation-name: appear;
    animation-duration: 2s;
  }

  @keyframes appear {
    0%   {background-color: red;}
    25%  {opacity: 0.8;}
    50%  {}
    100% {background: #8c8787;opacity: 0.6;}
  }
}
ion-app.ios offline-banner .margin {
      margin-top: 43px;
}
ion-app.md offline-banner .margin {
      margin-top: 56px;
}
1 Like
4

Is this just overlapping on top of other items?
How do you get it to show on the “root page”?

5

I got it to show by adding in ion-content around my html, but then I could not interact with the page at all. I couldn’t click or do anything on it. The ion-content area took up the full page.

6

it is on every page between the <ion-header> and the <ion-content>

</ion-header>

<offline-banner></offline-banner>

<ion-content padding>
7

I’ve actually never had a reason to try it, but can you not just put it in app.html?

8

I was able to put it in app.html, but it gets hidden by other items. I’m not sure why, but looking at the debug code, when ionic loads a page it sets the z-index to 100. (I’m guess something similar happens with the nav bar). The item is there but are both using the same spaces. Why Ionic does that I don’t know.

I finally changed the z-index to 105 but also wrapped my div with . This allowed everything to show up, but its over the top of nav bar (where we have a logo). I can’t seem to get to go above or below the nav bar.
My manager now suggested we use a toast instead. It does look like this will work (and still be over the top of other items).

9

Ah sorry. Hadn’t noticed you tried app.html already as per your initial post. Toast is a good plan

10

Hello,

I think toast is a good idea to notify.

Otherwise you should show your html code, because you said it is there but not uesable. Maybe there is a solution for that.

Maybe you have a sidemenu and can put it also there.

Best regards, anna-liebt

1 Like
11

the component works good for me:

04
041080×1920 91 KB

Do that if you need more help.

12

Hausaufgaben?
Wer macht den bitte Hausaufgabe? Ist das nicht so ein Zeug, wo sich Alexia und Konsorten drum kümmern sollen.

Wenn, wie glaube ich vor 2 Jahren, für einen 10.te Klasse Test in Mathe so Aufgaben gestellt werden wie:
Bilde aus den Ziffern 2, 3 und 6 die größte Zahl. Ja dann brauchst auch keine Test mehr.

Only joking, anna-liebt

13

Naja Siri, hat sich mal geweigert meine zu machen…

32^6?:sunglasses:
Ja Volksverdummung, unser Schulsystem ist ja auch nicht mehr das beste.

in english:

Siri denied to do do my Homework. It reasoned with a quote from Soraktes.

Yes stupefaction of the people, our current Schoolsystem is deprecated and stupid.

14

I was able to solve similar task by putting <ion-footer> under the main <ion-nav> element (attribute main) of the app.component template. Thus this footer is shown on every page (but not if modal shown). Actually, it can be any div with position: absolute, placed on top of the page e.g., not only ion-footer. The bad thing is that it doesn’t push content up/down - it overlaps it.