Let's start with adding a new /ClientApp/app/components/quiz/quiz.component.ts file with the following content:

import { Component, Input } from "@angular/core";

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

export class QuizComponent {
    @Input() quiz: Quiz;
}

Once done, follow up with the /ClientApp/app/components/quiz/quiz.component.html template file:

<div *ngIf="quiz" class="quiz">
    <h2>{{quiz.Title}}</h2>
    <ul>
        <li>
            <label>Title:</label>
            <input [(ngModel)]="quiz.Title" placeholder="Insert the 
            title..." />
        </li>
        <li>
            <label>Description:</label>
            <textarea [(ngModel)]=" quiz.Description" 
            placeholder="Insert a suitable description..."></textarea>
        </li>
    </ul>
</div>

Right after that add, the /ClientApp/app/components/quiz/quiz.component.css stylesheet file:

.quiz {
    margin: 5px;
    padding: 5px 10px;
    border: 1px solid black;
    background-color: #dddddd;
    width: 300px;
}

    .quiz * {
        vertical-align: middle;
    }

    .quiz ul li {
        padding: 5px 0;
    }

The only new thing in this component is the @Input decorator, which is required in Angular to define a target property. Target properties, as the name suggests, are expected to be the target of a data binding. A data binding takes place whenever a component property (or a DOM element) takes its value from an external source instead of having its own value; the external source is usually another property from the same component or from a parent component.

In our scenario, we used the @Input decorator with the quiz local property, because we want to make it available for binding; more specifically, we plan to bind it to the selectedQuiz of QuizListController.