Questions Management – Frontend – Build adding new option using Angular

Check out the full series of Questions Management tutorial here.

In the previous tutorial, we have built the interface for the adding new option page. Now is the time to add the functionality for this page!

First, I will create a new OptionsService class to make call to the API adding a new option from the API Option Service.

To do this, we will create an OptionService class located in the src/app/services directory as follows:

Questions Management – Frontend – Build adding new option using Angular

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

To be able to call the API adding new option of the API Option Service, I will declare using the Angular’s HttpClient object as follows:

Now I can write a method to add a new option from the API Option Service:

The variable headers are declared as follows:

Similar to calling API Category Service and API Question Service, to avoid the CORS error mentioned in this tutorial, I will edit the proxy.conf.json file located in the project’s frontend folder to add for the calling to API Option Service as follows:

With this declaration, outbound requests with URLs starting with “/option” will be requested to http://localhost:8283, which is the URL of the API Option Service.

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

OK, now we will use the OptionsService class to perform the adding new option.

To do this, we first declare to use the OptionsService class in the constructor of the NewOptionComponent class as follows:

As you can see, I’ve also added ActivatedRoute objects to get the question id from the URL request and the Router object so that after adding the new option successfully, we will redirect to the details page of a question to check results.

Next, we will edit the form adding new option to add variables that store the value of the description, isCorrect, note entered by the user using the Angular ngModel directive as follows:

As you can see, I also modified the content of the “Add New Option” button to allow when the user clicked on this button, our application will call the createNewOption() method in the NewOptionComponent class to do adding new option.

The contents of the NewOptionComponent class will be modified as follows:

As I mentioned above, after successfully adding an option, our application redirects to the question’s page. So in the NewOptionComponent class, we used the navigate() method of the Router object to redirect to URL “/question/{id}” after receiving a successful response from the API Option Service.

OK, so we have finished for adding new option in the Frontend of the Question Management application. Let’s try it out!

In the “Add New Option” page, enter the following new option information:

Questions Management – Frontend – Build adding new option using Angular

and click “Add New Option”, our application will redirect to the information page of this question as follows:

Questions Management – Frontend – Build adding new option using Angular

Add Comment