Questions Management – Frontend – Build updating category using Angular

Check out the full series of Questions Management tutorial here.

We have prepared the necessary information to build updating a category in the Frontend of our Questions Management application such as a CategoriesService for calling the API Category Service, a Category object for containing a category information, the interface to display all the categories in the system. Now, we will go into the details of building up this updating category.

First, I’m going to add a method in the CategoriesService to call up the API for updating category of the API Category Service, as follows:

In this section, when the user clicks on the Edit button in the category list, I will code to open a popup using the Bootstrap Modal that allows the user to edit the category information in the popup.

To do this, first, I will add the code for the popup in the category.component.html file after the panel as follows:

then I will update the code of the Edit button to open the popup when the user clicks on it:

In the CategoriesComponent class, I will add two methods to handle this updating category:

At this point, we have finished building updating category  for the Frontend section of the QuestionsManagement application. Let’s run the test.



Suppose, we currently have the following categories:

Questions Management – Frontend – Build updating category using Angular

Suppose I now need to update the category with the code 1Z0-803, I will click the Edit button of this category. The following popup will appear:

Questions Management – Frontend – Build updating category using Angular

You can change any information you want. Then click the Update button to update.

My result is as follows:

Questions Management – Frontend – Build updating category 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