Welcome to part-2 of the recipe book app. We will add on top of the app we have create in the previous part. You can find the code for the earlier part in this github link.

We will first add a directive to our project to add dropdown functionality to the Manage button. Create a new file dropdown.directive.ts in the shared folder.

Here, we are using HostBinding to the open class of bootstrap and creating a variable isOpen. We are then adding it to a listener with click, with help of HostListener.

dropdown.directive.ts

We also need to add this directive to the app.module.ts file, since we have created the directive manually.

app.module.ts

Now, we will use this directive in the recipe-detail.component.html file.

recipe-detail.component.html

Next, we will also add it in the header.component.html file.

header.component.html

Now, both dropdown are working properly.

Dropdown

Next, we will add services in our project. We will be creating a recipe service and a shopping list service.

First create a recipe.service.ts file in the recipes folder. Here, we are adding the Recipe array from recipe list. We are making it private, so that only Recipe component can use it. Also adding a function getRecipes(), to send a copy of the recipes.

recipe.service.ts

Next, we will be adding the RecipeService in the recipes.component.ts file, which is the parent component for all Recipes.

recipes.component.ts

Now, we will use it in the recipe-list.component.ts file, by removing the array from their. Our app will behave the same and we have successfully done the service.

recipe-list.component.ts

We have a long chain to cross component communication in recipes, which we will solve through services. We will create a new Emitter in recipe.service.ts file.

recipe.service.ts

We are getting rid of the EventEmitter first in recipe-item.component.ts file and adding this service now.

recipe-item.component.ts

We can now go to recipe-list.component.html file and get rid of the recipeSelected listener.

recipe-list.component.html

Now, we will also get rid of the emitter in recipe-list.component.ts file.

recipe-list.component.ts

Now, in recipes.component.html file, we will get rid of the recipeThatSelected event, as we are not using it anymore.

recipes.component.html

Now, in the recipes.component.ts file we will use the subscribe to get the recipe service.

recipes.component.ts

Our application is working as usual and we will move to shopping service now.

Create a file shopping-list.service.ts in the shopping-list folder and add the ingredients from shopping-list.component.ts file.

shopping-list.service.ts

Now, add it in the app.module.ts file, since we also want to use it in the recipe component.

app.module.ts

Now, we will use this service in shopping-list.component.ts file.

shopping-list.component.ts

Our app is working fine for shopping list and we will now add the service to add ingredients.

We will first deleted the not required EventEmitter for shopping-edit.component.ts file.

shopping-edit.component.ts

We will also remove the listener from shopping-list.component.html file.

shopping-list.component.html

Also, in the shopping-list.component.ts file, will remove the onIngredientAdded method.

shopping-list.component.ts

Now, in the shopping-edit.component.ts file we will use the ShoppingListService to add an ingredient.

shopping-edit.component.ts

Now, in the shopping-list.service.ts file, we will add the function to add an Ingredient. Also notice that we have to emit the ingredients, since we are working with the array copy.

shopping-list.service.ts

Finally, we will go to our shopping-list.component.ts file and add the subscribe to get all of Ingredient list.

shopping-list.component.ts

Now, we will add logic for each recipe to have ingredient and with click of button make to shopping list.

We will add ingredients first in the recipe.model.ts file.

recipe.model.ts

Now, we need to add the Ingredient in recipe.service.ts file.

recipe.service.ts

Now, we will show the ingredient in the recipe-detail.component.html file.

recipe-detail.component.html

It is showing perfectly in localhost.

localhost

Now, we want to send these ingredients to the shopping list, if we click on To Shopping List from dropdown.

We will first add a click event in recipe-detail.component.html file.

recipe-detail.component.html

Next, we will add this function in recipe-detail.component.ts file, where it will call another function in recipe service.

recipe-detail.component.ts

Now, in the recipe.service.ts file, we will add the function addIngredientsToList, which will call a function addIngredients in Ingredient service.

We have to add Injectable in recipe service, as it is calling shopping-list service.

recipe.service.ts

Now, in the shopping-list.service.ts file, we will be adding the addIngredients function. It will loop through the ingredients and add it in the ingredients array, through the addIngredient method.

shopping-list.service.ts

Now, we are able to add ingredients from recipes to shopping list and with this our part 2 is complete. You can find the code for the same in thisgithub repo.

App done