If you would like to learn Angular while working on an interesting project, then you are welcome!
This would be a 6-part procedure but 11-video series on Angular 9 for beginners. The six parts are as follows
- Build the Spring Boot API, Setup Angular
- Fetch and Display JSON Data
- Make POST Request
- Display the Details Modal
- Handling Record Update
- Deleting a Record
In this part, we first create an API using Spring Boot. Data is stored in H2 in-memory database. Then controller methods for GET, POST, PUT and DELETE are written. Next create a new Angular app, install Bootstrap, Angular Material, NgBootstrap and Font-Awesome. Finally we configure angular routing, create components and setup the template. Also remember to add @CrossOrigin annotation to the controller. This is because, we would access this controller from external application.
We use HttpClientModule to fetch JSON data from API. Next we setup the HTML table and display the retrieved data on the HTML page. Finally, we add buttons for Add New, Details, Edit and Delete. These buttons are designed using Bootstrap and Font-Awesome
Here, we first setup the modules for displaying a modal popup. These is NgbModule and FormsModule. Then the modal popup was added and tested. Next, we design the form using template-driven form and add the submit event and submit event handler code. Finally, the form submission was tested.
In this part, we display selected record. It’s quite easy. When a user clicks on the link on the table. The selected record is sent to a method. This method simply displays the record on the form using getElementById().setAttribute().
What to remember here is that the controls must have a readonly attribute. This is because, the data need not be modified.
This is similar to the the form new submission. However, there are some differences. First the form used for editing and updating is a Reactive Form. The form for new submission is a Template-Driven form. Reactive-forms are more feature-rich than template-driven forms. So we would use it here. So here also, when a user clicks on edit, the record is sent to the method and displayed on the controls. Then, when Submit is clicked, the content of the form is sent to the controller method handling PUT requests.
Here, we tidy up the update operation and work on the DELETE operation. This is the easiest!. When a user clicked Delete, we display the modal popup, and save the id of the selected record. So when the user confirms the DELETE, use that id as Pathvariable (URL Parameter) to make a HTTP DELETE request to the DELETE endpoint.
Find all Angular and Spring Boot Tutorials here www.munonye.com
Microservices with Angular and Spring Boot here www.munonye.com/microservices