Questions Management – Frontend – Build the interface for adding new option using Angular, Bootstrap

Check out the full series of Questions Management tutorial here.

Currently in our Questions Management application, there are two places that allow us to add new an option. It is in the page showing all the questions:

Questions Management – Frontend – Build the interface for adding new option using Angular, Bootstrap

The second is in the details page of a question:

Questions Management – Frontend – Build the interface for adding new option using Angular, Bootstrap

To implement the feature adding new option, I will create a new component called NewOptionComponent located in the src/app/questions/all_questions directory.

The content of this component will initially be as follows:

with the new_option.component.html file, it looks like this:

As you can see, I have built a form so that we can enter the information of an option including: option description, correct means that this option is true or false for this question, note to contain additional information about this option.

Now we will declare NewOptionComponent into QuestionsModule:

And declare Routing for it:

As you can see, the URL declared for NewOptionComponent is “/new-option”. Because an option must belong to a question, when we go to the new option page we will need to pass more information about the question id that this option belongs to. The request URL looks like this: “/new-option?questionId={questionId}”.

The last step in the build interface for adding new option is that we will edit the two places with the new button for adding new option that I aforementioned, so that when the user click on the two buttons, our application will go to the add new option page.

Specifically, in the all_questions.component.html file, we will edit the code:

to:

And in the question.component.html file, we’ll edit the code:

to:

At this point we have finished building the interface for adding new option.

Now if you run the application again, go to the “All Questions” page and click on the button adding new option, the result will be as follows:

Questions Management – Frontend – Build the interface for adding new option using Angular, Bootstrap

Similarly, if you click on the “Add New Option” button in the details page of a question.

Đá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