Building a Recipe Book app in Angular-3

6 min readSep 28, 2021

Welcome to part-3 of the recipe book app. We will start with adding routing in this part.

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 be first creating an app-routing.module.ts file, in which we will put all the routing details. If we hit an empty path, we will be showing the recipes page. The other two routes will be recipes and shopping-list.

Next, we will add the AppRoutingModule in the app.module.ts file.

Finally, we will show a router-outlet instead of the earlier code in the app.component.html file.

Now, we can navigate to both recipes and shopping-list routes, by typing on browser. But we cannot click on the links.

To add the routes first go to the header.component.ts file and remove the Output and onSelect function. It now contains very minimal code.

Now, in the header.component.html file, we will add a routerLink to navigate to the respective Components. We are also adding a routerLinkActive to get the active Component.

Now, our navigation is working properly on localhost.

There is an issue, when we click on any recipe and it’s reloading the page. We will fix it now. Go to the recipe-item.component.html file and remove the href and put a cursor pointer in it’s place.

Next, we will fix the reloading in Edit Recipe and Delete Recipe by removing the href and put a cursor pointer in it’s place, in the recipe-detail.component.html file.

We will also fix the Save Data and Fetch Data in header.component.html in the same way.

Now, all of our reloading issues are solved. We will be moving to implement child routes for each recipe.

We will also be creating a new component recipe-start, as a child route. Give the below command to generate the component.

ng g c recipes/recipe-start

Our new component will only hold a text. So, update the below in recipe-start.component.html file.

Next, in the recipes.component.html file we will add a router-outlet instead of the earlier code.

Now, in the app-routing.module.ts file we will be adding children path of RecipeStartComponent and RecipeDetailComponent

Now, we will clean up some of the earlier code and will remove the Input from recipe-detail.component.ts file.

Next, we will also remove the function onSelected from recipe-item.component.html file.

Now, in the recipe-item.component.ts file, we will remove the function onSelected and also the service. It will now look like below.

Now, we will go to recipe.service.ts file and add a new function to get a recipe, when we provide an index number.

Now in recipe-detail.component.ts file, we will use the params and take the id to get the recipe. We are using the observable, because it can update later and not just in initial load.

Now, if we manually go to any route, we will get that recipe.

Now, we will enable the links to work and for this we will pass the index first from the recipe-list.component.html file.

Next, we will add the index in recipe-item.component.ts file.

Finally, we will add the routerLink and routerLinkActive in recipe-item.component.html file.

Now, our links are working fine and showing the correct recipe on click in localhost.

Now, we will add the logic to add or edit a recipe and for this we will create a new component by below command.

ng g c recipes/recipe-edit

Now, we will go to the app-routing.module.ts file to add the new route for Recipe Edit component. We are using it for both new and the edit recipe.

Now, in recipe-edit.component.ts file, we will check whether id is present and make it editMode depending on that.

Now, we will hook the button to create a new recipe. First write a click listener on recipe-list.component.html file, which will call a function onNewRecipe.

Now, in the recipe-list.component.ts file we will implement the function onNewRecipe, which will take us to the new route.

Now, the New Recipe button is working properly and taking us to the Recipe Edit component.

Now, we will hook the button to edit a recipe. First write a click listener on recipe-detail.component.html file, which will call a function onEditRecipe.

Now, we will add the function onEditRecipe in recipe-detail.component.ts file which will take us to the Edit component.

Now, our Edit is also working properly.

This complete the part-3 of our project. We will complete, it in part-4. The code for this part can find in this github repo.

Building a Recipe Book app in Angular-3

Written by Nabendu Biswas

No responses yet