Join Alexander Zanfir for an in-depth discussion in this video Solution: Displaying quizzes, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] Here is the solution to the previous challenge. Remember that the challenge was to display the quiz and quiz list components instead of the questions in our home view, and to use the same service design to allow the two components to communicate with each other when selecting a quiz from the list to edit. In this video, we'll begin modifying our frontend in order to support associating questions with quizzes. So in other words, we can now edit quizzes, create quizzes, and add questions to quizzes.
We'll first begin by modifying our home.component and so instead of displaying questions, we'll be displaying quizzes instead. So the first thing we'll need to do is create a quizzes.component just like we have a questions.component. So let's create two two new files and then the html file. And let's use our questions.component as a template so I'll copy the typescript and I'll also copy the html.
And let's begin modifying our typescript. We'll update the selector, the templateUrl, the class name, and we'll change the question property to quiz and questions to quizzes, and we'll be using the same server strategy in order to communicate between our quiz.component and our quizzes list component. So eventually we will need to modify our API to support that and we'll also eventually have a getQuizzes function in our API, but for now, I'll just comment this out and I'll take out our post function.
And actually, I'll take out the post function from the questions.component since that remained behind and we don't actually need it. Let's save that and then move on to our html. So we'll change this, let quiz of quizzes for our ngFor on line 3. Then let's change line 4 and our click binding to api.selectQuizzes, even though it doesn't exist yet, and we'll pass in the quiz, and then we'll display the quiz title instead of the question text.
Let's save that. Now let's open up our api.service and let's over to the top and copy line 8 and line 9, paste them below, and then change it to Quiz so we'll have our subject for selectedQuiz and then we'll have our quizSelected observable. Now let's go down and create a selectedQuiz function by copying the selectedQuestion function.
And I've made all of the corresponding changes. Now let's close up our api.service. Now lets go back to our component typescript and we will need to get all of our quizzes in the ngOnInit. So let's uncomment this and change this to api.getQuizzes and set our quiz to the response.
Then let's go to our API and add that. So in our api.service, I'll copy our getQuestions function on line 16 and paste it below and I'll rename it to getQuizzes and I'll update the URL as well. Let's save that and close it out. And then we can save this. After we've saved all these changes, let's double-check that there's no errors in our app. Then let's go over to our app.module and register our new component, and add it to the declaration lists.
Now let's close that out and then let's open up our home.component, and instead of displaying the question and questions component, we'll display our quiz and quizzes, and before we give it a try, we need to switch quiz to quizzes just in a few places. So in our QuizzesComponent, on line 17, we actually need to set the quizzes list instead of the quiz itself when we're getting quizzes.
So I'll change that. And then in our html, instead of selecting Quizzes, we'll be selecting Quiz. We can see that our home component is displaying the quiz component and the quizzes list component as well, and if we add a new quiz and refresh, we can see it's now part of the list, but if we click on one of the quizzes, it's not updating the quiz component, so let's go take care of that. Let's open up our quiz.component and we can see we have an ngOnInit, and we should probably subscribe to the SelectedQuiz observable that we created in our API.
Let's look at how the question.component does it. So I'll copy line 15 and paste it into our ngOnInit and then instead of api.questionSelected, I'll change it to quizSelected, pass back a quiz and then set our quiz to it. And then let's go to our api.service, scroll to the top, and on line 12, you might have already caught it, but I left selectedQuestions the same and that should be selectedQuiz.
So let's give it a try. So I'll select New Quiz, and now you can see we're in Edit Quiz mode but our new button doesn't work so let's take a look at that. So let's open up our quiz.component.html and we don't yet have the newer edit button correctly binded. So let's start with the new button. We'll set quiz to an empty object. Let's give that a try. And it's working.
Next, let's focus on our edit button when we're in edit mode. Currently it does nothing. So let's go to it on line 14 and add api.putQuiz and pass in the quiz. And now let's open up our api.service to add that. So let's copy our putQuestion on line 30 and paste it below our postQuiz function, and we'll edit it accordingly, changing the name, the URL, the quiz.id, and the parameter we pass in.
Let's save that and give it a try. And I'll just add an exclamation mark. Let's hit edit. And if we refresh, we can see that the name change has persisted. So now we're displaying both our quiz components inside our home view, inside of our questions components. Next we'll need to look at how we can load all of the questions from a single quiz.
- 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