Questions Management – Frontend – Build deleting option using Angular

Check out the full series of Questions Management tutorial here.

After building the updating option for the Frontend, now is the time to perform the deletion operation for this option.

First, I will add a method to OptionsService class that will allow us to call the API delete option of the API Option Service to pass information about the option that we need to delete.

Specifically, this method is as follows:

Next, we will also add a new method in QuestionComponent to perform delete option as follows:

As you can see, after confirming the delete option, I called the deleteOption() method of the OptionsService that we just added above.

Finally, we will revise the deleting option button in the question.component.html file to call the deleteOption() method in the QuestionComponent class when the user clicks on this button.

From:

To:

OK, so we have added functionality for deleting option button. Let’s run it.

Suppose I have a question like this:

Questions Management – Frontend – Build deleting option using Angular

Now, delete the option “Test option 1”:

Questions Management – Frontend – Build deleting option using Angular

The results are as follows:

Questions Management – Frontend – Build deleting option using Angular

Questions Management – Frontend – Build deleting option 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.