Adding the component

Our second Angular component is ready; let's add it to our Angular app and test it.

Open the app.module.shared.ts file and add the required references (new lines are highlighted):

[...]

import { HomeComponent } from './components/home/home.component';
import { QuizListComponent } from './components/quiz/quiz-list.component';
import { QuizComponent } from './components/quiz/quiz.component';

@NgModule({
    declarations: [
        AppComponent,
        NavMenuComponent,
        HomeComponent,
        QuizListComponent,
        QuizComponent
    ],

[...]

Then, open the quiz-list.component.html file and append the <quiz> pseudo-element in the following way (new lines highlighted):

<h2>{{title}}</h2>
<ul class="quizzes">
    <li *ngFor="let quiz of quizzes"
        [class.selected]="quiz === selectedQuiz"
        (click)="onSelect(quiz)">
        <span>{{quiz.Title}}</span>
    </li>
</ul>
<quiz *ngIf="selectedQuiz" [quiz]="selectedQuiz"></quiz>

In the preceding code, we added a <quiz> pseudo-element with a couple of Angular-specific attributes that deserve some explanation:

• The *ngIf is a condition that will hide the whole <quiz> element if the selectedQuiz value resolves to false, meaning that it's null or empty. This is a good thing because we want to render the QuizComponent only when the user selects a quiz from the list.
• The [quiz] attribute clearly references the @Input() quiz local property of the QuizComponent class that we just talked about. The Angular Template Syntax requires that the targets of a property binding must be wrapped into square brackets so that they won't be mistaken for standard HTML attributes.