How to navigate between pages with data depending on each other?


#1

Hello, I’m wondering if someone can help me out with this.

So basically what I want to do is have the ability to travel between two pages where page 1 has multiple inputs when clicked goes to page 2 with a listview. When the user selects an item from the listview it goes back to page 1 and populates the input with the selected option.

I understand the concept of Observables and data binding to one page using a view-model but am somewhat unclear how Observables would come into play when two pages are involved?

Some code samples would be greatly appreciated as well!

Thank you


How do I pass data when navigating back using the "< Back" button?
#2

You can pass information using the context from one page to another as show in Example 4: https://docs.nativescript.org/core-concepts/navigation#navigate-and-pass-context

Then if you want to access that information you can do so in the navigatedTo event as showing in Example 7: https://docs.nativescript.org/core-concepts/navigation#example-7--bind-the-content-received-from-main-page


#3

hi, we’re talking :nng: here as I understand, right? If so, here’s a sample of my use of an observable to get all student cards and place them in a card view:

In the ngOnInit, I get all my data from the service and then on click, I navigate to a settings page

https://github.com/jlooper/practicebuddy-web-mobile/blob/master/src/client/app/frameworks/practicebuddy/components/home/home.component.ts

What I’m not sure about is your UX. How about using a list in a modal, so you aren’t flipping back and forth page to page?

Either way, you can pass data back home by passing a little extra data over the route:

goToTeacherStudentHome(student:StudentModel){
  let navigationExtras = {
    queryParams: { 'name': student.Name }
  }
  this._router.navigate(["/teacher-student-home", student.id], navigationExtras);
}

hope this helps


#4

Hi @jen.looper thanks for the code sample, I’m however not using ng2 instead just typescript.


#5

ohh I misunderstood. In which case Nick’s links above will hopefully be of use.


#6

?> can anyone explain what is firstname here?? from where it came???

const getFrameById = require(“tns-core-modules/ui/frame”).getFrameById;

const navigationEntry = {
moduleName: “details-page”,
context: { info: “something you want to pass to your page” },
animated: false
};
const frame = getFrameById(“firstFrame”);
frame.navigate(navigationEntry);


#7

firstFrame should be the id given by you to a frame. Starting {N} 4.x we have support for multiple frames in a application, getFrameById returns the frame by it’s id. It’s something similar to getViewById but works at frame level.

For example

<Frame defaultPage="home/home-page" id="firstFrame" />

Now in home page you might have another frame, let’s say

<GridLayout>
 <Frame defaultPage="sub/sub-page" id="secondFrame" />
</GridLayout>

Using getFrameById is a convenient method to get reference of a frame.

Note: In future, please do not use unrelated threads to post your question. If you don’t find any existing thread related to your question, feel free to post new one.