Before going further, we can take the chance to add a Delete Quiz button to our QuizController and bind it to another event-handler method that will take care of the client-server interactions required to actually execute the delete action.

Let's start with creating the button in the quiz.component.html template file; we can put it just below the Edit button:

[...]

<div>
    <input type="button" value="Edit" (click)="onEdit()" />
    <input type="button" value="Delete this Quiz" (click)="onDelete()" />
</div>

[...]

Once done, add the following onDelete() method implementation in the quiz.component.ts file, right below the onEdit() method:

[...]

onDelete() {
    if (confirm("Do you really want to delete this quiz?")) {
        var url = this.baseUrl + "api/quiz/" + this.quiz.Id;
        this.http
            .delete(url)
            .subscribe(res => {
                console.log("Quiz " + this.quiz.Id + " has been 
                deleted.");
                this.router.navigate(["home"]);
            }, error => console.log(error));
    }
}

[...]

There's nothing new here, except for the good old JavaScript confirm() technique that we threw in to prevent users from accidentally deleting a quiz; that popup is as ugly as it was in the 90s, but it's still a good time/value deal when we're in a hurry, even in Angular!