Questions Management – Frontend – Build adding new question using Angular

Check out the full series of Questions Management tutorial here.

After creating the interface for adding new question, now is the time to go to implement the function of adding a new question.

First, I will add to the QuestionsService class a method that will allow us to call the API adding new question of API Question Service to pass the question information we need to add.

Specifically, this method is as follows:

Since I wanted after adding a new question successfully, our application will redirect to the detail question page, so in the above method, I got the result returned from the API Question Service.

Next, we will edit the new question form in our new_question.component.html file, which will allow us to display all the categories in the system:

with the categories variable is declared in the NewQuestionComponent class as follows:

The value of the category variable is derived from the API Category Service using the API retrieving all categories of this service:

Now we will go into the implementation for adding a new question.

In the new question form, we will declare variables that hold the value of the description and category entered by the user using the Angular ngModel directive as follows:

As you can see, I have also modified the content of the “Add New Question” button to allow when the user clicks on this button, our application will call the createNewQuestion() method in the NewQuestionComponent class to add new question.

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

As I mentioned above, after successfully adding the question, our application will redirect to the detail question page, so in the NewQuestionComponent class, I declared the Router class and use the navigate() method of this class to redirect to the URL “/question/{id}” after receiving a successful response from the API Question Service.

OK, so we’ve finished the adding a new question in the Frontend of the Question Management application. Let’s try it out!

In the “New Question” page, after entering the question information need to add:

Questions Management – Frontend – Build adding new question using Angular

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

Questions Management – Frontend – Build adding new question using Angular

There is also a section on the “All Questions” page, we also have the “Add New” button:

Questions Management – Frontend – Build adding new question using Angular

In order to call to the New Question page, we will modify the code of this button as follows:

Now you can from the “All Questions” page call to the New Question page.

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

Add Comment