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


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?

You can pass information using the context from one page to another as show in Example 4:

Then if you want to access that information you can do so in the navigatedTo event as showing in Example 7:


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

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:

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

hope this helps


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


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


?> 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”);


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

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

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.