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.
- 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.
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.
- 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.
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.
Let’s now try this out. Input a sample stock name and code:
Congratulations! Tesla Inc with the stock code TSLA is successfully added. We have now created data with HTTP post.