IONIC Section 5 - 5.11 Navigate between pages

Click here for more videos available on our youtube channel !

Hello everyone, to access the recipe details page, when you click on a recipe item, in our "recipes.page.html" we can use a feature that we have seen together before. We are going to add “(click)”, in our “ion-item”. But you can use the "[routerLink]=" "", which allows you to add the components while adding your own navigation. So as its name suggests, we are going to insert a link, dynamic of course, because the ID we want to load differs. This is why we connect the “routerLink” brackets the binding property and then we pass an array of segments in which we add “[ './', recipe.id ]” which makes it possible to make a relative link. Let's see if it works, we save and switch to our application, and if we click on a recipe, we have access to the recipe details page, and we can also see that a small transition has taken place when changing pages. Now it would be nice to be able to go back to the previous page using a back button which needs to be added separately so that we can control whether we want a button on a specific page or not. Now, if we look at the documentation in our components, in the "toolbar" category, you have "ion-back-button", and you have the description as well as the layout of this component. It is therefore stored in "ion-buttons" by giving it a starting slot with "slot="start"", the platform's default starting position, usually on the left, but depending on the platform, region, the geographical location where the user will use this application, it may be on the right. So here we are going to add "ion-buttons" in our file “recipe-detail.page.html”, just below our “toolbar”, with a “slot=”start””, and below we add our “ion-back-button” in which we define a default attribute in case if this page was loaded as the first page. So we enter "defaultHref="/recipes". So if we save our progress, and when we come back to our application, we will click on our recipe, and once on the details page, we test our button, and we are redirected to our home page. However, if I click on the second recipe, we are redirected to the first. This is a known bug in our “routerLink” which can be fixed by specifying a absolute path [ '/recipes', recipe.id ]", and it is at this moment that we can put a comparison operator in our service with "===". For now, that's the way to go. easiest way, use an absolute path for navigation and with this one you can go back, back and forth as often as you want on the different pages. So we use Angular features, and it's Ionic that will add animations. Ionic also keeps track of your browsing movements. That's the end of this video, we'll meet again for the next one.