Complete Angular 9 Project for Beginners – A Step by Step Tutorial with Videos

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

1. Build the Spring Boot API, Setup Angular
2. Fetch and Display JSON Data
3. Make POST Request
4. Display the Details Modal
5. Handling Record Update
6. Deleting a Record

Part 1 – Build the API and Setup Angular

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.

•  Get the Step by Step Procedure
• Video Tutorial here: Video 1, Video 2

Part 2 – Fetching JSON Data

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

•  Get the Step by Step Procedure
• Video Tutorial here: Video 3, Video 4

Part 3 – Making POST Request

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.

•  Get the Step by Step Procedure
• Video Tutorial here: Video 5,  Video 6

Part 4 – Details Modal Form

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.

•  Get the Step by Step Procedure
• Video Tutorial here: Video 7

Part 5 – Editing and Updating (PUT Request)

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.

•  Get the Step by Step Procedure
• Video Tutorial here: Video 8, Video 9

 Part 6 – Delete Operation

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.

•  Get the Step by Step Procedure
• Video Tutorial here: Video 10

Find all Angular and Spring Boot Tutorials here www.munonye.com

Microservices with Angular and Spring Boot here www.munonye.com/microservices