From Solution Explorer, right-click on the /ClientApp/app/components/quiz/ folder and add a new HTML file; call it quiz-list.component.html, and replace the sample code with the following:

<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>

Among these few lines, we can see the two things we were looking for:

• The HTML code to render the quiz list, handled with a ngFor cycle that will iterate through the quizzes array and create a number of <li> elements as soon as it is filled by the .subscribe() method of HttpClient in the component class source code
• The (click) event handler that will raise a call to the onSelect() method, where the currently iterated quiz is passed as a parameter

There are also a couple of other things worth noting:

• In line 4, we added a simple logic that will decorate the <li> element hosting the selected quiz with the selected CSS class so that we can style it in a different way.
• In line 1 and line 6, we make use of the double-curly braces of interpolation, an important Angular feature that allows us to insert calculated strings into the text between HTML element tags and within attribute assignments. The text between the braces is almost always the name of a component property; the whole block will be replaced with the string value of the corresponding component property. This means that, in our specific scenario, we can expect to see the component title between the <h2> element in line 1 and the quiz title between the <span> element in line 6.