IONIC Section 5 - 5.7 Using Angular functions on Ionic components

Click here for more videos available on our youtube channel !

Hello everyone, now we come back to our “recipes.page.html” page, or we want to display a list so we will replace our paragraph to 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're going to create a "recipes.model.ts" file to define how a recipe must look like and I will use an interface that we will name "Recipe" with "export interface Recipe {“, and we are going to put an ID on our string type recipes “id: string”, but also a title, an imageUrl, then some ingredients like bananas, apples for example. It is something that you you've probably never seen, it's 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 structure 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 which is array type to group all our recipes inside with "recipes: Recipe[] = [];" as well as our model. This type must therefore be imported from the recipe model file, we will not leave this table empty, instead we will fill this table which will contain some recipes that will have an ID, like "R1" for example, a title "Viennese Escalope", an imageUrl "for this 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 Meat’, ‘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 of your desires, I will put 'Spaghetti', I will retrieve the url concerning the image, then in ingredients we will be able to put 'Spaghetti', 'Meat', 'Tomatoes'. Once we have created our 2 recipes, we want to release them in our ion-list and this can be done by adding an ion-item, and as I want to repeat for each item from my list of ingredients, we will add a "*NgFor = "let recipe of recipes" this is an Angular feature that allows us to will browse all of our recipes. And we also want to display the image, let's say left and right, we want 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 will not be loaded. And we're gonna hook that up with square brackets "ion-img [src]="recipe.imageUrl" and we're gonna put a "slot=start" to our "ion-avatar" so that everything ends up on the left. And next to the avatar, we will put a "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're going to save and we get this application, here which renders quite nice using Angular and Ionic, and that will be all about this video.