IONIC Section 5 - 5.9 State Management with Services

Click here for more videos available on our youtube channel !

Hello everyone, now we are going to add an Angular service and again we can generate it again with the command “ionic generate”. If you press enter, you will see that it is possible to select a service. Regarding the name of the service we will enter “recipes/recipes” this is what will give us a new recipe service in our “recipes” folder. In this file “recipes.services.ts” we have “@injectable” provides in route, which ensures that this information is provided application-wide. We can use the same instance of the service in any component, any page of the entire application. Of course, it is important to use the same instance. So if our recipe data changes, it's reflected in all components using this specific service instance. I will now take the recipes that I have defined in the recipe page “recipes.page.ts” by copying them then copying them here in the revenue department. So it is good at first to have the recipes, now we need them in the recipes page, But how to do it ? Well by default the properties are public, however, we are going to make it a private property, so we can't access it But we will add to that the method “getAllRecipes() { return; }", you can name whatever you want, and here we'll return, say a copy of this recipe array, so that if we then edit the array returned by this method inside the component , we won't be editing the original array, this is related to how arrays work and objects in JavaScript and the fact that they are reference types and not primitives. So here, I will integrate the method “[ …this.recipes]; in our function. This extracts all elements from this array and then appends it to a new array, then returns this new array which is a perfect copy of the old array, not array objects but the array itself. Once again, if there are notions necessary to understand concerning Javascript, I strongly advise you to watch the videos concerning this techno, this course allows you to initiate yourself but also to refresh a little certain notions, so do not hesitate above all. Now we can add below, the “getRecipe(recipeId: string)” method which requires a “recipeId” argument of type “string”, which will return a single recipe for this ID. and below we will enter “ { return this.recipes.find(recipe => { return recipe.id === recipeId }); }”. So here we want to return these recipes and then we want to use the find method which is a default JavaScript method that we can use on arrays, and this method takes a function that will be executed on all elements of the array, then if this function returns "true", in fact, we are telling "find" that this is the object we are looking for and it will stop execution without running find on any other element of the array and give us back this element on which it will run instead. So the function I'm passing here takes the recipe as input because again it executes this function on every element of the array. This is a recipe board. Thus, each execution of a function corresponds to a unique recipe to return "true" if this is the recipe we are looking for, otherwise false and so here in this state, I will compare the ID of the recipe we are looking for. look with "recipeId" that I had as an argument and if they are equal, then I have the recipe that we want to return it. Now, here as for the table, I will create a copy of this object "this.recipes" enclosing this whole call here in braces, then using the cast operator which yields return "{ …this.recipes.find(recipe => { return recipe.id === recipeId })}; }”, to extract all the properties of the recipe object and add them to a new object. It is therefore the service that can be used in the recipe page and in the recipe details page. This is already Angular's state management in action. In itself it is not very complicated, but writing similar logic in your application would already be more complex and will become more and more so throughout the course where we will have a management increasingly complex state. So our recipe service can be used in our components and, as you know, we can access a service by injecting it into a component. So here in the “recipe.page.ts” file, we are going to inject the recipe service, and for that you need to define the type. So in the “constructor” method, we will do: “constructor(private recipesService: recipesService) {}. And of course, you also need to import it from your file “import { RecipesService } from ‘/recipes.service’; So we are injecting the recipe service using this typo shortcut, where we automatically assign the argument we get here to a private property of the whole class, so that we can use the recipe service anywhere in the directory. And our “ngOnInit” is therefore always ideal for initialization work, so here we want to call the recipe service with the “getAllRecipes” method, which gives us “ngOnInit() { this.recipesService.getAllRecipes(); }” this returns an array of recipes and we want to store it in this component, so just below “export”, we will declare our array “recipes: recipe[]; » and therefore add " ngOnInit() { this.recipes = this.recipesService.getAllRecipes(); }", so that your local property matches the recipes sent by our method “getAllRecipes”. Now all it gives us is that if I save now it will give us the same look as before, but we can also tap into one recipe and that's what we're going to do next in the next video.