Questions Management – Frontend – Build adding new category using Angular

Check out the full series of Questions Management tutorial here.

In the previous tutorial, we prepared the necessary information to build adding new category using Angular in the Frontend of our Questions Management application such as a CategoriesService for calling to the API Category Service, an object Category is used to store information of a category. Now we will go into the details of building this adding new category.

First, I will add a method to the CategoriesService class to call to the API Category Service to add a new category as follows:

with the variable headers are declared as follows:

There are three types of information which a category has to offer: name, code and description, and two of them are name and code that we need to enter, so I’ll add a new createNewCategory() method in CategoriesComponent for adding new Category fulfills the above requirements as follows:

Now, we can edit the form adding a new category in the category.component.html file to add a new category as follows:

To use the Angular form directive, we need to import the FormModule in the QuestionsModule as follows:

Here, we have completed the building of adding a new category for the Frontend of the QuestionsManagement application. Let’s run the test.



Assuming that I now add a new category successfully, the result will look like this:

Questions Management – Frontend – Build adding new category using Angular

Adding a new category but do not enter the code.

Questions Management – Frontend – Build adding new category using Angular

Adding a new category but do not enter name:

Questions Management – Frontend – Build adding new category using Angular

Questions Management – Frontend – Build adding new category using Angular
Đánh giá bài viết
Chia sẽ bài viết này ...Share on Facebook
Facebook
3Tweet 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.