Join Alexander Zanfir for an in-depth discussion in this video Quiz score dialog, part of Building Applications with Angular, ASP.NET Core, and Entity Framework Core.
- [Instructor] In this video, we'll create a dialog that pops up when we hit finish, which will display how many questions we got correct out of the total amount of questions. In our frontend editor, let's create a new file in our app. I'll call it finished.component.ts. And let's copy the app component as a template and paste it in. We can get rid of the selector, and we'll have some placeholder text in our template.
And then let's rename class. Next lets register it with our app module. And add it to our declarations. Then I'd like to launch the dialog that will be displaying this finished component from our play quiz component, so let's take a look at that.
Inside our finished function, it should launch an Angular Materials dialog. Let's go look at the Angular Materials component page under dialog. In the api, you can see we need to import the dialog module, so let's do that. So I'll add it to both imports list. And back on the page, let's look at examples. Under the TS tab, we can see that we need to import Md dialog, so I'll copy this line.
And let's paste it in at the top. Then, let's inject it in our constructor. Finally there's a function called open dialog, let's copy the code that uses dialog.open. And let's go down to our finish function and paste that in. We'll do that below our for each loop. Then for the first parameter we'll only need to specify our finish component, but first we'll need to import that.
And then we can add it as a first parameter. I won't specify a width, and I'll leave the data as empty for now. Let's give that a try. Once the app loads, I'll hit finish. If you're getting this error, about no component factory found for finished component, we'll need to register our finished component slightly different in our app module. So let's go back and open up app module. And for dialogs, we'll need to add a new list so below bootstrap, let's add entry components.
And then we'll add finished component to that list. Let's save that and give it another try. Now we can see our simple dialog is being shown. Let's go ahead and format the finished component html document so that we have a title and our score. So in our finished component, I'll add a header.
And I'll title it your score, and I'll also make this a template literal so we can have multiple lines. And I'll add a header too, and I'll add some placeholder data. And I'll change that to your score. Let's take a look at that. And that's looking pretty good. So next I'd like to get the actual score instead of the placeholder data.
If we look in our play quiz components, we can see we can pass some data with a data property. So I'll pass in correct and another property called total, which I'll set to this.questions.length. Now let's look at how to get this data in our finished component. First we'll need a constructor, so let's add that to our class.
Then we'll need access to inject from Angular Core, so I'll add that to the imports list. Then in the constructor, I'll use @inject and then I'll also need to import MD_dialog DATA from @angular/material and then I'll supply that in the inject.
And then I'll save reference to it in a class property called data, and then I'll add that constructor body. Next let's access the value of data.correct in our template. So I'll use double curly braces, pass in data.correct. And let's give that a try. If I hit finish, you can see it's zero out of 40. Select one correct answer, now it's one out of 40. And then let's do the same for our total.
Data.total. And that's it, we now have a dialog that displays your score.
- 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