Questions Management – Frontend – Build interface shows all questions using Angular and Bootstrap

Check out the full series of Questions Management tutorial here.

For easy management of all questions, the Questions Management application will set aside a separate page for displaying all information about all questions. This page will allow us to go to another page displaying the information of a question and the options of that question, allowing us to edit, delete, and add new options to any question. OK, let’s get start.

The first thing is to add a menu item “All Questions” in the Questions menu item in the left sidebar.

In the previous tutorial, I added the menu item “Categories” then. Now I will add a new “All Questions” menu item in the sidebar.component.html file as follows:

At this point, if you run the application, you will see the results of the left menu as follows:

Questions Management – Frontend – Build interface shows all questions using Angular and Bootstrap

Next, I will create a new component called AllQuestionsComponent located in the src /app/questions/all_questions directory.

Questions Management – Frontend – Build interface shows all questions using Angular and Bootstrap

The content of AllQuestionsComponent will look like this:

with the file all_questions.component.html has content as follows:

Now we will declare the AllQuestionsComponent in QuestionsModule:

And declare Routing for it:

The last step we need to do is to edit the left menu for the “All Questions” menu item using the Angular routerLink directive so that we can navigate to the “All Questions” page.

Now, if you run the application again and go to the “All Questions” page, you will see the following result:

Questions Management – Frontend – Build interface shows all questions using Angular and Bootstrap

Questions Management – Frontend – Build interface shows all questions using Angular and Bootstrap
Đá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.