Submodule 23.1: Prepration

Introduction

The next step in this course is to store data in the db.json file in our json-server.

These data will be rendered in the HTML view every time we will call the page from our browser.

Let's prepare this page!

We will follow the same procedure that we used in the previous module. Follow the links provided on each page to remember how to accomplice the procedures.

Adding the Contact component

Exercise

1. Create a new component named contact
2. Update the routes.ts file by importing the new component and adding the path contactus for the new component
3. Update the Links in the footer.component.html file

Solution:

In this page, we will create a form. When a user clicks the Submit button, the data of this form will be stored in the db.json file in the feedback array as objects  (have a look at the end of your db.json file).

So, we have to create an Angular Service to send and fetch data between our application and our server.

Adding a feedback Service

Exercise

1. Create a new class named Feedback in a file named feedback.ts in the shared folder and include in the class the necessary name/value pairs. You can see these in the db.json file (firstname , lastname , message)
2. Import the class into the contact.component.ts file
3. Create a new service named feedback in the folder src\app\services
4. Import the class into the feedback.service.ts file
5. Then add the service to the app.module.ts file 
6. Complete the service!Import the Observable, the HttpClient, the baseURL and update the constructor. Add a getFeedbacks() method to fetch the data from the server. 

Solution:

Update the Contact component

Exercise

1. Update the contact.component.ts and the contact.component.html files

Solution:

The results

With the previous code configured, open your Terminal, go to the jsonServer  sub-folder and run json-server --watch db.json -d 2000. This will introduce a delay of 2 seconds before the server sends the reply for the request. The server will serve the db.json file for your application. You can watch the server in your browser  URL localhost:3000 

Open another Terminal window, go to the angularChocoYourname  angular-sub-folder and run ng serve to run your application in development mode. In your browser navigate to the URL localhost:4200 

The contact page has been served by the json-server. 

In the next submodule, you will create a form into this page.

Do a Git commit with the message "Fetching data".