Instead of implementing the ResultListComponent from scratch, we can give another try to the copy-rename-replace trick we used in the previous paragraph, taking the QuestionListComponent as the source. Create the /ClientApi/api/components/result/ folder, then copy paste the question-list.component.ts and question-list.component.css files there, renaming them as result-list.component accordingly.

Once done, perform the following case-sensitive find and replace tasks:

• Replace Question with Result
• Replace question with result

Alternatively, the reader can try to implement them both by himself and make additional changes, along with the following result-list.component.html template file that requires some additional work (relevant lines highlighted):

<h3>Results</h3>
<div *ngIf="results.length > 0">
    <table class="results">
        <thead>
            <tr>
                <th>Text</th>
                <th>Min. Value</th>
                <th>Max. Value</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let result of results">
                <td>{{result.Text}}</td>
                <td *ngIf="result.MinValue === null">N/A</td>
                <td *ngIf="result.MinValue !== null">
                {{result.MinValue}}</td>
                <td *ngIf="result.MaxValue === null">N/A</td>
                <td *ngIf="result.MaxValue !== null">
                {{result.MaxValue}}</td>
                <td><input type="button" value="Edit"
                           (click)="onEdit(result)" />
                    <input type="button" value="Delete"
                           (click)="onDelete(result)" /></td>
            </tr>
        </tbody>
    </table>
</div>
<div *ngIf="results.length == 0">
    This quiz has no results (yet):
    click the <strong>Add a new Result</strong> button to add the first one!
</div>
<input type="button" value="Add a new Result" (click)="onCreate()" />

We're dealing with MinValue and MaxValue here, which we defined as nullable numbers. We can just use {{result.MinValue}} and {{result.MaxValue}} within a <td> block, just like we did with the preceding {{result.Text}}; it would have worked, showing an empty string in case of null; however, since we wanted to show a custom N/A string instead, we used some *ngIf directives to get a more readable result.