IONIC Section 5 - 5.8 Configuring Angular Routes

Click here for more videos available on our youtube channel !

Hello everyone, now we come back to our “recipes.page.html” page, where we want to display a list so we will replace our paragraph for insert an "ion-list" in which we want to insert some elements, some recipes. Of course, we don't have any recipes yet, we'll deal with that later. So for now, we will create a "recipes.model.ts" file to define how a recipe should look like and I will use an interface that we will name “Recipe” with “export interface Recipe {“, and we will put an ID on our string type recipes "id: string", but also a title, an imageUrl, then some ingredients like bananas, apples for example. This is something you've probably never seen, it is a typography feature, we define an interface, we can use it as our own type and we can make sure that we always work with the same structures data in our application. So with our “recipes.page.ts” file we will be able to modify the recipe interface, we will add a recipe property that is of table type in order to group all our recipes inside with "recipes: Recipe[]= [];" as well as our model. This type must therefore be imported from the file of the recipe model, we will not leave this table empty, we will rather fill in this table which will contain some recipes that will have an ID, like "R1" for example, a title "Viennese Schnitzel", an imageUrl "for that you can copy the URL of your image corresponding to your ingredient and you insert it like this, and finally we will enter the ingredients: ['Fries', 'Pork', 'Salad']. We will be able to add a new recipe, so we copy the first one then paste below our second with an "Id: 'r2'" which we will modify. So you can customize according to your desires, I'm going to put 'Spaghetti', I'm going to retrieve the url concerning the image, then in ingredients we go be able to put 'Spaghetti', 'Meat', 'Tomatoes'. Once we have created our 2 recipes, we want pull them out into our ion-list and this can be done by adding an ion-item, and as I want to repeat for each item in my ingredient list, we will add a “*NgFor=“let recipe of recipes” this is a Angular feature that will allow us to browse all our recipes. And we also want to display the image, let's say left and right, we want to have our text. For that, we can use this component "ion-avatar", this component allows to wrap our "ion-img" with optimizations such as loading the image only if it is visible, so when the user can see it. So if it scrolls outside the user's current viewport, it won't load. And we're going to hook that up with "ion-img [src]="recipe.imageUrl"" square brackets and we're going to put a "slot=start" to our "ion-avatar" so that everything ends up on the left. And next to the avatar, we will put an "ion-label" which will wrap our text with a string interpolation to display the recipe title by doing {{ recipe.title }}. Don't forget to import "Recipe" into your "recipes.page.ts" file just above with import { Recipe } from ‘./recipes.model’; We are going to save and we get this application, here which gives a pretty nice rendering using Angular and Ionic, and that's all about this video.