Adding the references

As always, before we can use the component, we need to add it to the AppModule class. Open the app.module.shared.ts file and add the following highlighted lines in the import list and the declarations array:

[...]

import { QuizListComponent } from './components/quiz/quiz-list.component';
import { QuizComponent } from './components/quiz/quiz.component';
import { QuizEditComponent } from './components/quiz/quiz-edit.component';
import { QuestionListComponent } from './components/question/question-list.component';

[...]

declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
QuizListComponent,
QuizComponent,
QuizEditComponent,
QuestionListComponent,

[...]

As soon as we do that, we can add our new component to the quiz-edit.component.ts file using its <question-list> selector. A good place to put it will be right after the <div> element containing the quiz command buttons:

[...]

<div>
<input *ngIf="editMode" type="button" value="Apply Changes" (click)="onSubmit(quiz)" />
<input *ngIf="!editMode" type="button" value="Create the Quiz!" (click)="onSubmit(quiz)" />
<input type="button" value="Cancel" (click)="onBack()" />
</div>

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

[...]

Again, this is just standard stuff: the one-way data-binding to the quiz object that we've talked about for a long time early on, and a *ngIf directive that will ensure that the child component will be shown only when the parent works in Edit mode.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.55.198