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.
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.
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).
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.