Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap

Check out the full series of Questions Management tutorial here. After we have completed the display of the questions, now we will implement the detail for the missing parts in this page, including adding a new question, viewing the contents of a question, editing and deleting a question. The first thing that I will do is build a page that displays the content of a question! To display the information of a question, we will retrieve its information based on its id. First, I will add a method in the QuestionsService class to make call to the API to find question by id of the API Question Service as follows: Next we will create a new component called QuestionComponent located in the src/app/questions/all_questions directory. This component will use the findQuestionById() method of the QuestionsService class to search for the content of the question based on id, which is retrieved from the ActivatedRoute object as follows: The question.component.html file has the following contents: Now we will declare the AllQuestionsComponent in QuestionsModule: And declare Routing for it: The last step we need to do is revise the table displaying all the questions in the all_questions.component.html file, the Actions section, from: to: At this point we have completed the construction of the display content of a question. Now if you run the application again, go to the “All Questions” page: Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap Click on the eye icon in any line of the table, you will see results similar to the following: Questions Management – Frontend – Build the display content of a question using Angular, Bootstrap
Questions Management – Frontend – Build the display content of a 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.