The first thing we need to do is to configure the AppComponent HTML template to make it render a couple more <quiz-list> component tags; while doing that, we also need to find a way to uniquely identify them in order to issue a different behavior for each instance, including latest items, most viewed items, and random items.

Open the /ClientApp/app/components/home/home.component.html file and update our preceding code in the following way (added/modified lines are highlighted):

<h1>Greetings, stranger!</h1>
<p>This is what you get for messing up with .NET Core and Angular.</p>
<quiz-list class="latest"></quiz-list>
<quiz-list class="byTitle"></quiz-list>
<quiz-list class="random"></quiz-list>

Then, add a home.component.css style sheet file in that same folder and fill it with the following:

quiz-list {
    width: 400px;
    display: block;
    padding: 2px 20px;
    margin: 0px 5px;
    float: left;
}

    quiz-list.latest {
        background-color: #f0f0f0;
    }

    quiz-list.byTitle {
        background-color: #e0e0e0;
    }

    quiz-list.random {
        background-color: #d0d0d0;
    }

Needless to say, all these CSS rules won't work unless we add a reference to their file in the home.component.css file. Let's do that (new lines are highlighted):

import { Component } from '@angular/core';

@Component({
    selector: 'home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent {
}

Let’s take a closer look at what we did here:

• We added two more <quiz-list> elements.
• We defined a standard class attribute with a different value for each instance; this is what we will use to uniquely identify each one of them. Note that we could’ve used the id attribute or any other standard or custom attribute; using class seems to be a rather elegant choice, as it can also be used to apply different styles.
• We took the chance to implement some minimalistic CSS styles to arrange the three elements horizontally and add some space between them; since they have different class attribute values , we also gave a unique background-color to each element.

Now is a good time to perform a quick debug run to see whether everything is working as expected:

We successfully managed to get three identical QuizListComponent instances within the HomeComponent. Despite the different UI styling determined by the distinctive class attribute value we gave them in the HomeComponent template, they all work in the same way. What we need to do now is to change their behavior according to their class so that each one of them will fetch different quizzes by consuming its own API.

Open the quiz-list.component.ts file and perform the following changes to the existing code (new and updated lines are highlighted):

import { Component, Inject, Input } 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 {
    @Input() class: string;
    title: string;
    selectedQuiz: Quiz;
    quizzes: Quiz[];

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

        switch (this.class) {
            case "latest":
            default:
                this.title = "Latest Quizzes";
                url += "Latest/";
                break;
            case "byTitle":
                this.title = "Quizzes by Title";
                url += "ByTitle/";
                break;
            case "random":
                this.title = "Random Quizzes";
                url += "Random/";
                break;
        }

        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.");
    }
}

We’ve got a fair amount of changes here. Let’s see what we did:

• In line 1, we added a reference to the Input decorator from @angular/core; we need it here so that our class will be able to issue a data-binding between the class input property (see line 11) and the class attribute defined in the HomeComponent template file. In other words, we plan to get the <quiz-list> class value so that we can use it programmatically (read further).
• In line 11, we added a local @Input class property that we'll use to get the class value at runtime.
• In lines 16-33, we re-implement the HTTP request logic by adding a switch-case statement that will configure some of the component settings--specifically, the title and the Controller API URL--depending on the @Input class property value, which is bound to the component CSS class.