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.