Angular – Create Data with HTTP POST

On the first part of the HTTP series, we learned how to fetch data using HTTP GETIn this lesson, we will now learn how to create data using HTTP Post.

To create data with HTTP Post, we are going to create an ‘Add Stock’ functionality for our application. To do this, open your stock.service.ts file and create a new createStock() function.

http post

  • createStock will issue a post request to localhost:3000/stock web service carrying the newName and newStockCode data.

Next, we’ll create a createStock() subscriber method that accepts two (2) new parameters in the dashboard.component.ts file.

http post

Finally, we are going to add a field where the user would input the new name and stock code. Go back to dashboard.component.html where we created the table and input the Add Stock field.

http post

  • The button collects the data inputted and returns it to createStock() function.

It’s ready to be run. Save your work and go back to your browser.

http post

Add stock field is now successfully added. Before we start testing this, let’s add location.reload() on the createStock() method in dashboard.component.ts to avoid refreshing the page manually every time we add a new item.

http post

Let’s now try this out. Input a sample stock name and code:

http post

Congratulations! Tesla Inc with the stock code TSLA is successfully added. We have now created data with HTTP post.

On the third article in this HTTP series, you will learn how to update data with HTTP PUT.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.