Questions Management – Frontend – Display all categories using Angular

Once you’ve created the interface for the Categories section, now it’s time to call the APIs of the API Category Service to add, remove, edit, and display all categories. In this tutorial, I will guide the first step is to display all categories using Angular.

First, I will write a CategoriesService class to make the API call to retrieve all categories of the API Category Service.

To do this, first I will create a new class called CategoriesService located in the src/app/services directory as follows:

Questions Management - Frontend - Display all categories using Angular

This class will be injected into the CategoriesComponent class to use, so we will declare it with the @Injectable decorator as follows:

Next, we will create a new Category object to contain the category information that the API will return as follows:

To be able to call the API to retrieve all categories of the API Category Service, I would declare using the Angular HttpClient object as follows:

Now, I can write a method to retrieve all the categories from the API Category Service:

As you can see, here I am not declaring baseUrl of the API Category Service. This is because both the API Category Service and the Frontend of the current Question Management application will run on the local machine. This will cause a Cross-Origin Resource Sharing (CORS) vulnerability if you run our application using a Chrome browser or some other application. You can find out more about this error on the internet.

To ignore this error, you can simulate our Frontend application when calling APIs of services through a proxy, by creating a new proxy.conf.json file in the Frontend project directory with the following content:

With this declaration, outbound requests with URLs beginning with “/category” will be requested to http://localhost:8282, which is the address of the API Category Service. In the future, when we deploy our application to production, we need to revise this part.

To use this class, we need to declare it in the AppModule class, in the provider attribute of the @NgModule decorator. We also need to declare import HttpClientModule:

OK, now we will use the CategoriesService class to get all the existing categories to display on the table in the Categories interface.

To do this, we first declare to use the CategoriesService class in the constructor part of CategoriesComponent:

then, I would define a category variable to contain all categories after retrieving the API from the API Category Service.

Now we can write code using the findAllCategories() method of the CategoriesService to get all the categories:

To display these categories, in the categories.component.html file, the table section displays the category list, I will edit as follows:

We need to declare the CommonModule in the QuestionsModule module to use the Angular directive which we used above as follows:

OK, everything has done, now try it.

Here, we need to run the Angular application with the proxy.conf.json file as follows:

Suppose now in the database I have the following categories:

Questions Management - Frontend - Display all categories using Angular

now, if you run the application you will see the list of categories is displayed as follows:

Questions Management - Frontend - Display all categories using Angular

Chia sẽ bài viết này ...Share on Facebook
0Tweet about this on Twitter
Share on LinkedIn

Add Comment