IONIC Section 5 - 5.10 Extracting and Displaying Route Parameter Data

Click here for more videos available on our youtube channel !

Hello everyone, to get a single recipe on our page “recipe-detail.page.ts” we will need our “recipeId” that we get as a dynamic segment on our path present in our “app-routing.module.ts” file. So we returns in our "recipe-detail.page.ts" where we can use a default Angular strategy in which we get information about the activated route, with "constructor(private activatedRoute: ActivatedRoute) { }" and import it with “import {ActivatedRoute } from ‘@angular/router’; which is an object you can use in your ngOnInit() { this.activatedRoute.paramMap. » to then look at your "param map" which is a bit complex but ultimately means a map of all the parameters that this route receives and the parameters are these dynamic URL segments. It is not an object with all these segments, but rather a so-called observable. Observables are basically objects that you can subscribe to to get data, be it point data. Like when you send an HTTP request or multiple times if you subscribe to something that emits new data every X seconds or whenever a user clicks somewhere or something like that, so we add “.subscribe(); ". This observable will emit new data every time our dynamic segments change, even if we are still on the same page, but it changes somehow because we have a button that modifies them. In "subscribe" we pass a function that will be executed when we receive new data. This function will get an object “(paramMap => { }” and this is now the object where we can extract our parameters. So first of all, I can check if our "paramMap" doesn't have "recipeId" as a parameter by embedding an "if (!paramMap.has('recipeId'))" This should be the case because we have defined it here, in the “app-routing.module.ts” file, at our “path” level. So the goal is to redirect the user to make sure he leaves the page here. Following this, “{ return }”. Thus, recipeId can be extracted from the "paramMap", indicating below: “const recipeId = paramMap.get(‘recipeId’); and now we'll extract our ID here and now we can use the service to load it. So for that we need to inject our recipes service, through our constructor( private recipesService: RecipesService ), of course you also need to import the recipe service with “import { RecipesService } from ‘../recipes.service’; ". We can recover our recipe, by performing below our constant, “this.recipesService.getRecipe(recipeId); ". Now this will return a single recipe, and to use it in the template, we need to store it in a property of our class here, just below “export”, naming it “loadedRecipe:Recipe; ”, which allows us to say that it will be a recipe or null, but initially it remains undefined, but once the data is in it, it must be of type recipe. So we're going to get our recipe here, “this.loadedRecipe = this.recipesService.getRecipe(recipeId); to access our recipe. And now in our "recipe-detail.page.html" file, we want to export an image. To do this, we will indicate in the “ion-content”, “ion-img [src] = “loadedRecipe.imageUrl” that we will wrap in an “ion-grid” in order to control the size, but also an “ion-row” and incorporate it in an “ion-col”. After that we will do another “ion-row” and “ion-col”, and in this row we will enter a title “h1” inside we will indicate a string interpolation “{{ loadedRecipe.title }}”. So we save our modifications and we will take a look at our “recipe.model.ts” file where we have our ingredients and it would be nice to display them also in our HTML file, in a new row in which we will put an "ion-list" and inside we will enter "ion-item *ngFor="let ig of loadedRecipe.ingredients"" in order to review all the ingredients by adding a loop and below we will be able to enter "{{ ig }}", to obtain a result we will also modify our service and enter a single equal in this function because there is no logical operator, it is a statement. Now we'll save and watch the result brought, remember that our identifiers of our recipes are "r1" and "r2" therefore, if we add to the url bar "/r1" we should load recipe 1 and "/r2" with all the details. So we get this result, the style is not too bad, we can make some adjustments of course. But we want make sure that our title does not indicate the detail of the recipe, but actually indicates the name of the loaded recipe. So we go back to our HTML file, to our “ion-title”, and we will enter “{{ loadedRecipe.title }}” and we will add a “color=“primary”” in our “ion-toolbar”. And if we save, and we see what happens, that doesn't seem too bad. Now we're going to center the title here, and make sure our image here, this column it's in, has no padding. So we come back to our HTML page and at the “h1” tag, we can center it with an HTML tag, “center”. But we don't just want to center the text. On our “ion-col” including the image, we do not want any filling. So in the "ion-col" we will indicate "no-padding", and we will reduce the size of the image by entering "style="width: 100px; height: 100px”. So we save our changes made, and we reload our page, we can be satisfied with our progress. However, entering the URL by hand is not really what we want. So how do we make sure that when we tap on this we go to the second page? This is what we will see in the next video.