With all these new additions, our Angular-based SPA should be able to show at least a glimpse of its true potential; let's perform a full surface test before adding questions, answers, and results to the loop.

This is how our Home view should appear now:

The new Create a Quiz NavMenu link is there, just as expected; by clicking on that, we will be brought to the Quiz Edit view:

As we can see, the QuizEditComponent is working as we would expect when the editMode switch is set to FALSE, prompting the user to create a new quiz. Let's fill the fields with some sample data, as shown in this screenshot:

Once done, click on the Create a Quiz button to see what happens:

Here's our new boy, it worked!

We can now create new quizzes; let's see whether we can edit the existing ones as well. From the Home view, click on the quiz we just added to access the Quiz view:

From here, we can test whether our Edit and Delete this Quiz buttons work. Clicking on the first one will bring us to the Edit Quiz view:

We can try to change some string values here and see whether the changes are reflected in the Database; we can even place some debug symbols within our client-side and server-side code to see how the request will be issued by the Angular app, received by .NET Core, and eventually handled within the Delete action method of QuizController through our EF Core's ApplicationDbContext instance.

When we're done, go back to the Quiz view and click on the Delete the Quiz button; the delete confirmation popup should appear to check whether we're really sure about that:

Click on Cancel first, then click on the Delete this Quiz button again and click on OK to let the app work its magic and then bring you back to the Home view. From there, we should be able to see that the newly created quiz is gone for good.