We're now able to launch our QuizEditController in Create mode from the Create a Quiz NavMenu link; however, there's currently no way to access the Edit mode yet. The most logical way to do that would probably be from the QuizComponent; the user will navigate from the quiz list(s) to a specific quiz, then--assuming that it's the author--would see a button to access the Quiz Edit view.
To implement such behavior, open the quiz.component.html template file and add the following code (new lines are highlighted):
<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>
<input type="button" value="Edit" (click)="onEdit()" />
</div>
</div>
Once done, add the onEdit() method implementation to the quiz.component.ts file in the following way:
[...]
onEdit() {
this.router.navigate(["quiz/edit", this.quiz.Id]);
}
[...]
The preceding code should be added just below the constructor method of the QuizComponent class.