Ionic 4: todo App + firebase

17 Creating Pages and Navigation Building Mobile Apps with Io

creating pages and navigation in this lesson you will learn how you can use the ionic CLI to create new pages in your ionic application not only

that you will also learn how you can navigate from one page to another and back finally you'll learn how you can send data from one page to another as you navigate within your application

navigation in ionic 4 is handled by the angular router in earlier versions of ionic it was not the case but an ionic 4 crowding is handled by the angular router and this is the decision that the

ionic team has taken because angular router offers a lot of features and is fairly powerful by default all the pages in ionic 4 are lazily loaded which means that a page is only loaded in the memory

when the user navigates to that page if a user does not navigate to a page that page will never be loaded in the memory thereby making our applications more efficient

so now that we know the basics of navigation in ionic 4 let's go ahead and create a new page and then we learn how we can navigate to this new page inside our application

so here we are back inside Visual Studio code and the first thing we'll do is go ahead and create a new page in our application to do that I'll be using the ionic CLI

and I will be stopping this development server to create a new page the command is ionic generate page followed by the name of your page for now I'm going to create

a new page called office let's go ahead and press ENTER and in just a few seconds a new page will be created inside our application and it's done now if you head back to the

Explorer you will notice that inside the app folder where you only had the home folder now you also have a folder called office and it contains all the same files that you have for the home page

so the office page has its own office not page dot HTML and office dot page dot s CSS file and it also has its own office dot page dot TS it also has its own office dot module dot PS which

confirms that the office page is a different module when we created this new page in our application one more thing happened the app –

routing dot module dot TS file was updated so if you open that file you will notice that the routes array here now contains an entry for the office page

it has two properties path and load children and these two properties are enough to define routes in our application basically a route is a mapping of a page module to a URL in the

browser so when the URL changes to slash office the office page will be displayed because the load children property points to the office page module and when the path changes to slash home the

home page module will be loaded which will in turn load the home page however if the path is the root path the user will be redirected to the home path which means when the application loads

are first the home page will be displayed to the user and that's what has been happening until now now if you run the server using ionic serve – – L you will see that our application works

just as it was working before so now that we have created a new page and a new route has been added to the routes array inside a routing module we can go ahead and write the code to navigate the

user from the home page to the office page to navigate from one page to another there are two ways and we are going to learn both so the first thing I'll do is

make two copies of this button and for the first button I'll get rid of the click event instead I'll go ahead and define an ETF on this button and to the ETF property I'll just go ahead and pass

in slash office I'll also change the text on the button to go to office and I'll save the file and now you can see that I have five buttons and I will just go ahead and

click this button that says go to office and as I click on this button I'm taken to a new page with a nice transition so that's one way of navigating from one page to another the other way is using

typescript so in this case we'll be using the click event of this button to invoke a function and that function will use the nav controller to navigate the user from one page to another I'll bind

the click event of this button to this function go to office now I'll just go to my home dot page dot ts file and create this new function called go to office inside this function we can use

the nav controller to perform navigation but to use the nav controller we'll have to bring in the nav controller just like we have imported in the loading controller toast controller and alert

controller so here I'll just put in a comma and import the nav controller and I'll also inject it into this class I'll name the instance variable as nav ctrl and this is of the type nav

controller now inside the go-to office function I can just go ahead and type in this dot nav controller dot navigate forward which is a function that is used to navigate if you want to move forward

in your application and this function takes in a URL in this case the URL is going to be slash office and that's it and before I test this out I'll also change the text on this last button

let's save that and now I'll just go ahead and click on this last button and it takes me to the office page and if you want to navigate back from your office page you can use the I on back

button component to use the iron back button component open your office door page dot HTML file and inside our iron toolbar and use the iron buttons component with the slot value set to

start and in here I'll just go ahead and place the iron back button component and this button will by default take the user back to the previous page so now if i refresh the application if I navigate

to the office page you can see that I have this button in the navigation bar and if I tap on it I am brought back to the home page so that's how you can navigate to and fro between your pages

in the application so now that you know how you can navigate from one page to another let's have a quick look at how we can send data from the home page to office page to do that

first you will have to add a small change to your app routing module file so open up your app – routing dot module or TS file and let's say that the office page is going to be receiving a

parameter from the home page so we'll have to modify the path value of the office page so as of now it's just office but we'll modify and we'll add a slash followed by a colon and

let's say that the name of the parameter is going to be ID so now office page we'll be expecting a parameter called ID and when you navigate from your home

page instead of navigating to slash office you will now be navigating to slash office slash the value of the ID parameter so let's say that the value of ID is one two three four five so if you

pass that in when you navigate to the office page using this fourth button the navigation still works the same way but now you can access this value one two three four five inside your office

page which is sent from the home page we'll have a look at how we can retrieve this value in just a moment but before that let's add the same code to our go to office function so I'll just open my

home dot page tour ts file and here in the navigate forward function instead of navigating to slash office we will now navigate to slash office slash 1 2 3 4 5 where 1 2 3 4 5 is the value of the ID

parameter so now that we are sending some data from the homepage let's see how we can retrieve that value on the office page so inside the office dot page dot ts file I'll go ahead and add

an import and I'll be importing a service called activated route and you will have to import this service from a package call at angular slash router once you have imported activated route

you will have to inject it into your class by passing it into your constructor as a parameter so let's just call it activated route with the lower case a and this is going to be of the

type activated route and in my constructor I can retrieve the value of this parameter using this activated route object so here I'll just go ahead and type in

let ID equal this dot activated route got snapshot dot param map dot get and to the gate function you have to pass in the same ID that you have defined in your app routing module so here the name

of the parameter is ID so you have to pass in ID inside the gate function and that's it now let's go ahead and log the value of this ID variable to the console and check if we actually get this value

on the office page or not so I will just make the console a little bigger here and you can actually see that as the application refreshes one two three four five is logged to the console

let's refresh the application completely and click on one of the two buttons here and I'll just click on the fourth one and I am navigated to the office page and the value 1 2 3 4 5 is logged to the

console which confirms that this value has been received by the office page to put things more clearly let's open localhost port 8 1 0-0 instead of the default 8 to 0 0 and you

will still see the same application but this time it's not in the lab mode let's open the browser's console here also and now click on one of the two buttons that we have created for navigation I just go

ahead and click on the 4th one and as we navigate from the home page to the office page the same thing happens we get this 1 2 3 4 5 logged to the console but notice how the URL changes in the

address bar in the browser the URL now says slash office slash 1 2 3 4 5 and this is the value that we are sending from the home page to the office page so now if I change this value to one two

three four five six seven eight and if I press enter the office page reloads and it receives the value one two three four five six seven eight so basically you are sending data from one page to

another with the help of URL from the sending page you add that value to the URL and on the receiving page you retrieve that value using the activated route service so now that you know how

you can navigate from one page to another and also send data as you navigate in the next section we are going to learn how we can use firebase with ionic