Questions Management – Frontend – Build updating option using Angular

Check out the full series of Questions Management tutorial here.

To update an option in the Frontend of the Questions Management application, I will first need to add a new method in the OptionsService class that allows us to call the API update option of the API Option Service to pass information about the option that we need to update.

Specifically, this method is as follows:

Next, we will build the form to update the option.

On the information page of a question, when users click on the Edit button of each option, I will pop up a window using Bootstrap Modal allows the user to update the information of this option. There are 3 information in this window that is option description, the option is true or false for this question and some notes about this option.

To do the above, in the question.component.html file in the src/app/questions/all_questions directory, I will add this new Bootstrap Modal after “<!- /.row ->” with the content as follows:

To display this popup will modify the code for the “Edit”, from:

to:

As you can see, this Bootstrap Modal id is “editOptionModal”. I have defined the currentEditedOptionDescription variable in the QuestionComponent class to keep the option description information we are updating for. The currentEditedOptionNote variable holds the current note information for this option, the currentEditedOptionIsCorrect variable that holds the option information that right or wrong:

When the user clicks on the “Edit” option, our application will call the editOption() method in the QuestionComponent class with the parameter as Option object that needs to be updated. Inside the editOption() method, we need to initialize an Option object to hold the information of the option we need to update and assign values to the currentEditedOptionDescription, currentEditedOptionNote, and currentEditedOptionIsCorrect variables as follows:

The editedOption variable is declared as follows:

When the user clicks on the “Update” button, the updateOption() method in the QuestionComponent class will be called to perform the option update as follows:

with the reload() method as follows:

Here, after the user has successfully updated the option, we will use the Router object to reload the information page of the current question to see the result.

OK, so that we have completed the option update in the Frontend of the Question Management application. Let’s try it out!

Suppose I have a question like this:

Questions Management – Frontend – Build updating option using Angular

Now I will edit the option “Something about this option” of this question by clicking the Edit button, the result will be as follows:

Questions Management – Frontend – Build updating option using Angular

After changing the Description to “Test option” and click the Update button, the result will be as follows:

Questions Management – Frontend – Build updating option using Angular

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

Add Comment