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

Check out the full series of Questions Management tutorial here.

To build the interface for adding new question in the Frontend section of the Questions Management application, first of all, I will add a menu item called “New Question” in the item Questions menu in the left sidebar.

To do this, I will edit 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 the interface for adding new question using Angular, Bootstrap

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

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

The original content of NewQuestionComponent would look like this:

with the new_question.component.html file has following content:

Now we will declare the NewQuestionComponent into the QuestionsModule:

And declare Routing for it:

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

Now, if you run the application and go to the “New Question” page, you will see the results as follows:

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

Questions Management – Frontend – Build the interface for adding new question using Angular, 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.