Join Alexander Zanfir for an in-depth discussion in this video Loading questions from quiz, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] Now that we're displaying our quiz component and quiz list on home view, we need to find a way to add questions to the quiz. In this case, we'll no longer have a need for the question and question list at the top in our nav bar. Since the concept of free floating questions won't apply any longer, and every question will have to belong to a quiz. The only way to access a question is through a quiz and so what I'd like to do is add an edit question button that gets shown when we select the quiz and then that will load the question and questions list components to allow us to add or edit existing questions.
So let's start by adding that button. Let's open up the quiz component html. And then let's copy the button on line 15 and paste it below. And so if there is a quiz ID and we are in edit mode, we'd like to show an Edit Questions button. And the functionality this button will need to perform, is to change the route to a component that has both the question component and the questions list component. So instead of using a click binding, let's take that out and we'll use a router link.
And we'll set it to slash question. Let's give this a try. So I'll select an existing quiz and I see the Edit Questions button now. Once I hit it, we're in our New Question component. So at this point to see both the question component and questions list component, we could create the third component that's apparent to both of them, just like we had with our home component. Or another solution could be that we make the questions list a child of the question components. This will only work if we don't plan on reusing the question component somewhere else since it will always contain the questions list component.
That's an easy solution for now that will work. Let's open up the question component html. And then at the bottom, below line 30, we'll add questions. Let's save that. And now we're in our question route showing the question component and we can see the question list. And if we click on a question, we can see we go into edit mode. And so that functionality is maintained. We're now able to go to our questions list through our quiz.
But our back end doesn't yet support any association between quiz and question. So let's take a look at that next.
- Creating and configuring the Angular project
- Creating forms with Angular
- Creating get and post routes in an ASP.NET Core controller
- Updating Angular service to post to API
- Persistence with Entity Framework
- Displaying and editing data in Angular with ASP.NET Core
- Navigating to different views in Angular
- Associations between entities with Angular and Entity Framework
- Setting up Identity Framework