Now, it's time to create the QuestionEditComponent, along with its required routes and references. To do that, right-click on the /ClientApi/api/components/question/ folder and add the question-edit.component.ts file with the following content (relevant lines are highlighted):

import { Component, Inject, OnInit } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { HttpClient } from "@angular/common/http";

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

export class QuestionEditComponent {
    title: string;
    question: Question;

    // this will be TRUE when editing an existing question, 
    // FALSE when creating a new one.
    editMode: boolean;

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

        // create an empty object from the Quiz interface
        this.question = <Question>{};

        var id = +this.activatedRoute.snapshot.params["id"];

        // check if we're in edit mode or not
        this.editMode = (this.activatedRoute.snapshot.url[1].path === 
            "edit");

        if (this.editMode) {

            // fetch the quiz from the server
            var url = this.baseUrl + "api/question/" + id;
            this.http.get<Question>(url).subscribe(res => {
                this.question = res;
                this.title = "Edit - " + this.question.Text;
            }, error => console.error(error));
        }
        else {
            this.question.QuizId = id;
            this.title = "Create a new Question";
        }
    }

    onSubmit(question: Question) {
        var url = this.baseUrl + "api/question";

        if (this.editMode) {
            this.http
                .post<Question>(url, question)
                .subscribe(res => {
                    var v = res;
                    console.log("Question " + v.Id + " has been 
                    updated.");
                    this.router.navigate(["quiz/edit", v.QuizId]);
                }, error => console.log(error));
        }
        else {
            this.http
                .put<Question>(url, question)
                .subscribe(res => {
                    var v = res;
                    console.log("Question " + v.Id + " has been 
                     created.");
                    this.router.navigate(["quiz/edit", v.QuizId]);
                }, error => console.log(error));
        }
    }

    onBack() {
        this.router.navigate(["quiz/edit", this.question.QuizId]);
    }
}

Once done, follow up with the question-edit.component.html template file:

<h2>{{title}}</h2>
<div class="question-edit">
    <div>
        <label for="text">Question text:</label>
        <br />
        <textarea id="text" [(ngModel)]="question.Text" 
          placeholder="enter a suitable text..."></textarea>
    </div>
    <div>
        <input *ngIf="editMode" type="button" value="Apply Changes" 
          (click)="onSubmit(question)" />
        <input *ngIf="!editMode" type="button" value="Create the 
          Question!" (click)="onSubmit(question)" />
        <input type="button" value="Cancel" (click)="onBack()" />
    </div>

    <answer-list *ngIf="editMode" [question]="question"></answer-list>

</div>

Finally, here's the question-edit.component.css style sheet file:

.question-edit textarea {
    min-width: 500px;
}

There's nothing new here, as we're using the same pattern we successfully pulled off to handle the Quiz | Questions one-to-many relationship.