After all we did with the questions, implementing the answer-related components will be a walk in the park! Jokes aside, this is pretty much the same code with some minimal differences. As a matter of fact, it will be even easier, as we won't have to struggle with child components; we'll just need to implement the ngOnChanges() life cycle hook again, since we have no parent changes to detect.

Anyway, here's the deal: from Solution Explorer, create the /ClientApi/app/components/answer/ folder and right-click on it to add the following answer-list.component.ts class file:

import { Component, Inject, Input, OnChanges, SimpleChanges } from "@angular/core";
import { Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";

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

export class AnswerListComponent implements OnChanges {
    @Input() question: Question;
    answers: Answer[];
    title: string;

    constructor(private http: HttpClient,
        @Inject('BASE_URL') private baseUrl: string,
        private router: Router) {

        this.answers = [];
    }

    ngOnChanges(changes: SimpleChanges) {
        if (typeof changes['question'] !== "undefined") {

            // retrieve the question variable change info
            var change = changes['question'];

            // only perform the task if the value has been changed
            if (!change.isFirstChange()) {
                // execute the Http request and retrieve the result
                this.loadData();
            }
        }
    }

    loadData() {
        var url = this.baseUrl + "api/answer/All/" + this.question.Id;
        this.http.get<Answer[]>(url).subscribe(res => {
            this.answers = res;
        }, error => console.error(error));
    }

    onCreate() {
        this.router.navigate(["/answer/create", this.question.Id]);
    }

    onEdit(answer: Answer) {
        this.router.navigate(["/answer/edit", answer.Id]);
    }

    onDelete(answer: Answer) {
        if (confirm("Do you really want to delete this answer?")) {
            var url = this.baseUrl + "api/answer/" + answer.Id;
            this.http
                .delete(url)
                .subscribe(res => {
                    console.log("Answer " + answer.Id + " has been 
                                                      deleted.");

                    // refresh the question list
                    this.loadData();
                }, error => console.log(error));
        }
    }
}

Follow this with the answer-list.component.html template file:

<h3>Answers</h3>
<div *ngIf="answers.length > 0">
    <table class="answers">
        <thead>
            <tr>
                <th>Text</th>
                <th>Value</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let answer of answers">
                <td>{{answer.Text}}</td>
                <td>{{answer.Value}}</td>
                <td><input type="button" value="Edit"
                           (click)="onEdit(answer)" />
                    <input type="button" value="Delete"
                           (click)="onDelete(answer)" /></td>
            </tr>
        </tbody>
    </table>
</div>
<div *ngIf="answers.length == 0">
    This questions has no answers (yet):
    click the <strong>Add a new Answer</strong> button to add the first one!
</div>
<input type="button" value="Add a new Answer" (click)="onCreate()" />

Then, follow it with the answer-list.component.css style sheet file:

table.answers {
    min-width: 500px;
}

Before moving further, don't forget to add the AnswerListComponent to the app.module.shared.ts file--just like we did a number of times already.