Questions Management – Frontend – Build the display all questions using Angular

Check out the full series of Questions Management tutorial here.

In the previous tutorial, I built the interface for displaying all the questions. Now is the time to call the API of the API Question Service to perform some manipulations on the question. The first would be to display all the questions.

First, I will create a new QuestionService class to make call to the API to get all the questions from the API Question Service.

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

Questions Management – Frontend – Build the display all questions using Angular

This class will be injected into the AllQuestionsComponent class so we will declare it with the @Injectable decorator as follows:

Next, I will create new objects to contain information about the question that the API Question Service will return. Since the object contains the category information we created in the previous tutorial, so I will create more the Question, Option, and CompositeQuestions as follow:

To be able to call the API to retrieve all questions from API Question Service, I will declare using Angular’s HttpClient object as follows:

Now I can write a method to retrieve all the questions from the API Question Service:

Similar to calling the API Category Service, to avoid the CORS error mentioned in this tutorial, I will modify the proxy.conf.json file located in the frontend project directory to add more for the API Question Service, as follow:

With this declaration, outbound requests with URLs beginning with “/question” will be requested to http://localhost:8281, which is the address of the API Question Service.

Similar to the class CategoriesService, we need to declare this QuestionsService class in the AppModule class, in the provider attribute of the @NgModule decorator, as follows:



OK, now we will use the QuestionsService class to get all the questions we need, to display on the interface of the questionnaire display.

To do this, we will first declare using the QuestionsService class in the constructor of the AllQuestionsComponent class as follows:

Now we can write the code using the QuestionsService findAllQuestions() method to get all the questions:

To display these questions, in the all_questions.component.html file, the table displays the list of questions, I will edit as follows:

OK, everything is over, now try it.


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

Suppose now in the database I have the following information:

Questions Management – Frontend – Build the display all questions using Angular

At this point, if you run the application you will see the list of questions displayed as follows:

Questions Management – Frontend – Build the display all questions using Angular

Questions Management – Frontend – Build the display all questions using Angular
Đánh giá bài viết
Chia sẽ bài viết này ...Share on Facebook
Facebook
2Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Add Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.