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

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