Building a Recipe Book app in Angular-5

Nabendu Biswas
5 min readSep 30, 2021
Photo by Windows on Unsplash

Welcome to final part of the recipe book app. We will HTTP requests in our app, 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 add functionalities of Save Data and Fetch Data from Firebase database in our project.

Save Data

We need to setup a new Project in firebase. The steps are exactly same as mentioned in the Angular Basics-12 post. We will follow them and create a new project named angular-recipe-book and it will use the Realtime Database.

Realtime database

First add the HttpClientModule in app.module.ts file.


Now, we will create a new service called data-storage.service.ts in shared folder. Here we will use the HttpClient and RecipeService and putting all the recipies in our firebase endpoint.

Also notice that we have added recipes.json at the end of our firebase endpoint.


Now, we will add a function onSaveData to the click handler in header.component.html file.


Next, in the header.component.ts file we are implementing the onSaveData function by calling the storeRecipes from dataStorageService service.


Now, just click on the Save Data button and our data will be stored in the firebase database.

Save Data

Now, it’s time to fetch the data. We need to create a new recipe service for it first in recipe.service.ts file. We are also commenting out the hardcoded recipes.


Now, we will add the function fetchRecipes in data-storage.service.ts file. Here, we are just using the GET request to get all data.


Next, we will add a function onFetchData() click handler in header.component.html file.


Now, just add the function onFetchData() in header.component.ts file.


Now, our Fetch and Save are working properly and taking data from stored firebase database.


It’s time to deploy our application, as it’s finally complete. For this we will first run the below command in our project.

ng build --prod

Now, we will host our project in firebase. So, open the firebase terminal and click on the Settings-> Project settings.


Next, click on the icon to create web-apps.


Now, it will ask to give the app a name. I have kept it same as the name we have given earlier. It is very important to click on Also set up Firebase Hosting.

After that click on Register app button.

Firebase hosting

In the next screen, just press Next button.


It is important to install the firebase-tools globally, if you have not already done.

firebase globally

Nest, just click on Continue to the console button.


Now, from the terminal give the command firebase login and you will be logged in.


Now, give the command firebase init in command line. It will ask to proceed, where give Yes and after that choose Hosting.


Now, choose Use an existing project and click enter.

Use an existing project

Here, i will choose angular-recipe-book and press enter.


Now, we need to answer some questions. The public directory is the dist and your app name. Rest should be as mentioned.


The last step is to run firebase deploy command from the terminal.

firebase deploy

Our app is now deployed and we are able to work on it from deployed url. This completes our big Angular project.


You can find the code for the same in this github repo.



Nabendu Biswas

Architect, ReactJS & Ecosystem Expert, Youtuber, Blogger