QuizListComponent

This component plays a key role in our Angular app and desperately needs a better layout; we'll change a lot of things here to make it more enjoyable.

Open the quiz-list.component.html template file and perform the following changes (new/updated lines are highlighted):

<div class="panel panel-primary {{class}}">    <div class="panel-heading">        <span class="glyphicon"></span>        <h4>{{title}}</h4>    </div>    <div class="panel-body">        <ul class="list-group">            <li class="list-group-item"                 *ngFor="let quiz of quizzes"                [class.selected]="quiz === selectedQuiz"                (click)="onSelect(quiz)">                <img src="https://lorempixel.com/50/50/?random=                 {{quiz.Id}}"                      alt="{{quiz.Title}}" class="img-circle" />                <span>{{quiz.Title}}</span>            </li>        </ul>    </div></div> ...

Get ASP.NET Core 2 and Angular 5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.