What we will do here is to create a dedicated component that will show a list of items task on screen. It's important to understand that we can also do that in our already-present AppComponent class; however, it won't be the ideal thing to do. We're working on a rather complex app that is expected to grow fast, thus it's advisable to embrace a modular approach right from the start and split our planned features into separate, reusable assets.

To be more specific, what we need now is a flexible and pluggable QuizListComponent that we can use--once or even multiple times as separate instances--within our existing AppComponent; we plan to use this pattern throughout all our client-side development experience.

Again, from Solution Explorer, add a new TypeScript file in the /ClientApp/app/components/quiz/ folder, call it quiz-list.component.ts, and fill it with the following content:

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

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

export class QuizListComponent {
    title: string;
    selectedQuiz: Quiz;
    quizzes: Quiz[];

    constructor(http: HttpClient, 
        @Inject('BASE_URL') baseUrl: string) {
        this.title = "Latest Quizzes";
        var url = baseUrl + "api/quiz/Latest/";

        this.http.get<Quiz[]>(url).subscribe(result => {
            this.quizzes = result;
        }, error => console.error(error));
    }

    onSelect(quiz: Quiz) {
        this.selectedQuiz = quiz;
        console.log("quiz with Id "
            + this.selectedQuiz.Id
            + " has been selected.");
    }
}

That’s a good amount of non-trivial source code. Let’s see what we just did in detail:

• In lines 1-2, we import the Angular references that we need from the @angular/core and @angular/common/http packages; since we’re creating a Component, we need the Component base class. Other than that, we also need to import the Inject decorator, which we're using within the class constructor to make the baseUrl parameter available through Dependency Injection (DI), and the HttpClient class to perform HTTP requests, also being instantiated using DI.
• In lines 4-8, we set up the component UI layout and following settings:
  • The selector, which gives a name to the HTML pseudo-element we'll have to use to include the component within another component's template; in this case, with the given value, it will be <quiz-list></quiz-list>
  • The templateUrl, pointing to a single HTML file containing the component template
  • The styleUrls, pointing to the CSS files that will contain the component styles; the expected value is an array, meaning that we can split the component styling into multiple CSS files
• Starting from line 10, we can find the QuizListComponent class declaration, along with all its properties, its constructor, and methods.

Before adding the template and style files, there are still a couple of things in the preceding source code that we need to look at; let's try to shed some light on them.