Just like we did for the creation of the book list component, we will have to navigate to the directory we want our component to be created in.
Then we generate our component bms-add-book:
We also need to define the path of adding a book to our module.
The code to add a book is rather simple. The user is presented with a form that needs to be filled out. This form contains information about the book (title, author and ISBN) as well as a submit button. Each filed has a corresponding ID. For instance the input field for the title of the book is identifying by bookTitle. We will see later why we need these IDs. We also want to add some styling to improve the looks of our form.
To be able to reference a bookForm, we first have to build a form and specify the fields that we want our form to hold.
When a form is submitted, the function onSubmit() is called and it takes as an argument the value of the form bookForm.value.
As a matter of fact, when a book is submitted, all we need to do is to call the service responsible for adding a book with the information that was just submitted.
In any good navigation design, the user should be able to intuitively navigate through the website. To achieve that, we have to offer the user a way through which they can access the add book component as well as exit it or go back to a previous component (book listing component).
Let us go back to the book list component that we have previously created and add a button that redirects the user to the route that we defined for our add book component.
Now, we can reach the add book component from the book listing component by simply clicking on the button "Add Book".
We also want to allow the user to go back to the book listing in case they miss-clicked or simply changed their mind.
As adding a book consists of both making a backend call to add an entry to the database and updating the view, we will have to modify our BMS service and module. We will also create a component called bms-add-book and update previously defined components for navigability.
First we have to add two new functions, namely: addBook and addNewBook.
addBook is responsible for making the backend API call to add a new book. In the request body, we pass the book object that has been specified in the parameters.
addNewBook is a private method as only the service should be able to update the list of books and no other component. It is responsible for keeping the list of books up to date.
Caution: you should only add the functions addBook and addNewBook rather than replace the entire content of bms.service.ts with the code above.
For the sake of brevity, we omit all unnecessary pieces of code.
Whenever a portion of code is omitted, it is replaced by the following indicator:// ...
If the request does not go through for whatever reason, we will get an error and in that case we simply print it to the console.
Caution: Keep in mind that this is done for demonstration purposes. In reality, all errors should be handled properly and the user should be made aware that the system is misbehaving.
On the other hand, if the request succeeds, we can safely update our list of books that we defined in the service by calling addNewBook.
After assembling all the different parts together, this is how your final code should look like:
As mentioned earlier, addBook makes a POST HTTP request to the backend server. It sends in the request body the book that it received as an argument. Since HTTP calls are asynchronous, we have to wait for the response of the backend by .