Join Alexander Zanfir for an in-depth discussion in this video Associate quiz to questions, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Narrator] Going forward, all questions will need to belong to a quiz, since we mentioned there will no longer be any free floating questions. In order to that on the back end, with Entity Framework we'll need to add a new property that we can then set to a quiz ID, so we know that this question belongs to this quiz through the quiz ID. So inside our questions class let's add a new property at the bottom. It will be of type int and we'll call it QuizId.
So going back to our web app, when we create a new question and then post it to the back end, it will also need to supply the quiz ID. So at this point we'll need to know what quiz we're currently adding new questions to or editing questions in. So we'll need to create some sort of state that remembers the quiz ID. So let's go back to our home component. And when we click on a quiz, and then click edit questions, at this point we'll have to remember the quiz ID of the quiz that we just clicked edit questions on.
And we can do that by using a URL parameter. So we'll simply append the quiz ID in front of /question in the URL. So the first thing we'll need to do is add that parameter to the URL. So let's go over to the quiz component HTML. And inside our edit questions button, we'll need to modify our routerLink slightly to include a parameter. The first thing we'll need to do is surround the routerLink in square brackets.
And we'll do the same inside our string with /question. Then we'll wrap our path as well with single quotes. Then we'll had a second item and this will be the ID, so for now we can just try hard-coding it with two. Save that, and let's give it a try. So if we click on our quiz, then edit questions, we'll get an error. And it's saying that it cannot match any routes, so we'll need to modify our routes inside our app module in order to do that.
So let's copy our question path on line 26 and paste it below. Then we'll specify that it requires a parameter. We'll do that with / + : and then the parameter name which will be quizId. Let's save that. Now let's try it again. Select the quiz, edit question, and you can see we have our two in our URL. So the next objective is to get the value of our quiz ID inside the question component.
So let's load our question component ts. In order to do that, we'll need to import ActivatedRoute from @angular/router. And then let's inject it with our constructor. Then inside ngOnInit, above line 16, we'll create a variable for quizId, and set it to this.route.snapshot.paramMap.get and then we'll pass a string with the parameter name which is quizId.
Now for testing, let's console.log the quizId. Save that and give it a try. We can see that we're getting the value two in our console. Next inside our quiz component HTML, let's pass the actual quiz ID. Let's give that a try. So we'll click on the new quiz, we'll hit edit questions, and we can see we're getting a one in our URL and the values also being displayed in our console. So now that we're able to get the quiz ID, we need to be able to load all of the questions that are associated with that quiz ID.
So we will need to attach our quiz ID to the question in our post question function. So to do that, instead of having a local variable called quizId, we'll have a variable in our class. So I'll create it, and call it quizId as well. And then instead of setting the local variable, I'll use this.quizId and we can get rid of this console.log. So now when this question component is loaded the ngOnInit will set the quiz ID of the quiz that loaded the question component.
And so we'll have that association now in our front end. So now inside our post function on line 20, we'll simply set question.quizId to this.quizId and that should be it, let's give it a try. So let's add a new question. We'll hit post and then the response we get back from the server will contain the quiz ID with the correct value. The next thing we need to is load only questions that belong to a specific quiz.
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