We're done with the QuizComponent, but now we need to make it work by changing the way the QuizListComponent makes use of it. The first thing that we need to do is to remove its element tag from the quiz-list.component.html template file:

<h2>{{title}}</h2>
<ul class="quizzes">
    <li *ngFor="let quiz of quizzes"
        [class.selected]="quiz === selectedQuiz"
        (click)="onSelect(quiz)">
        <span>{{quiz.Title}}</span>
    </li>
</ul>
<!-- <quiz *ngIf="selectedQuiz" [quiz]="selectedQuiz"></quiz> -->

We commented it out, but we can delete it as well. Now, open the quiz-list.component.ts file and add something to the implementation of the onSelected() method so that it will route the user to the QuizComponent instead of relying on a data-bind that is long gone:

[...]

onSelect(quiz: Quiz) {
    this.selectedQuiz = quiz;
    console.log("quiz with Id "
        + this.selectedQuiz.Id
        + " has been selected.");
    this.router.navigate(["quiz", this.selectedQuiz.Id]);
}

[...]

Wait a minute, this line will never compile, as there is no this.router in the QuizListComponent file! Let's fix that in the constructor, with the help of the Angular syntatic sugar we learned of earlier (new lines are highlighted):

import { Component, Inject, Input, OnInit } from "@angular/core";
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";

@Component({
    selector: "quiz-list",
    templateUrl: './quiz-list.component.html',
    styleUrls: ['./quiz-list.component.css']
})

export class QuizListComponent implements OnInit {
    @Input() class: string;
    title: string;
    selectedQuiz: Quiz;
    quizzes: Quiz[];

    constructor(private http: HttpClient,
        @Inject('BASE_URL') private baseUrl: string,
        private router: Router) {
    }

[...]

Needless to say, we had to import the Router class as well.