Use navcontroller to change just a part of the page

Ionic Framework ionic-v3
1

I have a page with the following template:

<ion-content>
    <div>Fixed part</div>
    <div>Nav part</div>
</ion-content>

How can I use the navcontroller to push and pop pages in just the second div?

2

That sounds like a very unusual layout that is likely to cause lots of problems. Why can’t you use <ion-header> for the fixed part and <ion-nav> for the nav part?

3

I’m already using tabs in the top positon, so I don’t think that ion-header will work nicely.
What kind of problems will this layout may cause?

4

Hello y01s,

This html view also seems a bit unusual to me, if you are really stuck to one view or page, like I had, I suggest you use Segments.

That you can call back and forth with ngif, both from the view, and from and the controller in page.

Hope it helps,

5

And to reply more accurately, push and pop cannot change “only” one part of a page. This is not possible because they directly go to another page in your Ionic src/pages/ folder. You have to rethink your navigation structure with existing navigation things in Ionic framework.

6

Segments seems like a good solution, but the thing is, the app wil have pages that are going to make http calls and display a big amount of data.
I was actually thinking of a way to use multiple navcontrollers (somthing like nested navcontrollers), but I guess as you said pushing can’t change just one part of page.

I guess using each part in a component and controlling them with ngIf would do. What do you think?

7

Well your need seems to be quite complex, much more complex than what I do in my current project app.
But in your case I would go answer this:

  1. To my understanding, NavControllers (and NavParamaters because you wanna transmit data between pages) would not be practical and fast because you have a lot “tons” of data to read before you change page
  2. I don’t know much about preloading huge chunks of data with Angular http, but if you can, rethink your “called” data by http in a flat model way, like Firebase does. (eg, don’t worry about duplicates in different tables, worry about speed and the minimal query and an “as flat as possible” structure with unique IDs across different tables).
  3. Ionic make use of asynchronous calls all the time, a benefit from AngularJS and Rxjs, so you can use their power to pause, wait or halt any http query while watching data transfer. For that I refer you to what is an observable with Ionic 2 >>
    https://www.joshmorony.com/building-mobile-apps-with-ionic-2/observables-in-ionic2.html

Hope that helps :slight_smile:

8

Well exactly I exaggerated when I said “a big amount of data”. Actually, the parts are more like feeds, so the amount of data to preload isn’t that big, but if the user kept scrolling and then moved to other parts, the data handled will be big.

Anyway, thanks for your suggestions and help

9

Re yo1s,

Thinking about you issue and while you said the data is not that big, to preload, then take advantage of ionic events AND obsversables.

Aka

(ionDidViewEnterPage = data { things… }.then{ this.value = data … }
but again check the tutorial of JoshMorony, it’s a good one really :slight_smile:
I’m not sure you can use a promise on this but to be sure all data is loaded before page loads, the .on should work

aka

(ionDidViewEnterPage = data { things… }.then{ this.value = data … }.On…

never tried it

Have fun with Ionic

1 Like
10

While the distinction between pages and components isn’t such a big deal in Angular itself, it sort if is in Ionic. The navigation system is designed to interact with pages, and pages are not supposed to try to embed other pages. Pages can embed components, and that may be a better fit for your situation, but then you take responsibility for slinging them around outside of the navigation system.

1 Like