We might think that these changes will be enough to do what we want; however, if we hit the run command and take a look at the browser's HomeView, we can see that nothing has changed. We still get three identical QuizListComponent instances with the same title and quizzes.

What's going on there? The best thing we can do to understand it will be to debug our client app, inspect our class property, and see why the switch-case statement is not working as expected.

We can do that by taking advantage of the TypeScript runtime debugging capabilities provided by Visual Studio:

Alternatively, we can do that using the JavaScript console log in the following way (the quiz-list.component.ts file, new lines are highlighted):

[...]

    constructor(http: HttpClient, 
            @Inject('BASE_URL') baseUrl: string) {
        console.log("QuizListComponent " +
            " instantiated with the following class: "
            + this.class);

[...]

Regardless of how we do that, the result won't change; the class local property will have a undefined value, meaning that the binding isn't working. This makes the switch-case fallback to its default condition, hence we get three identical Latest Quizzes component instances regardless of their class attribute value.

Now that we've found the issue, we just have to understand the reasons behind it; to do that, we have to take a closer look at the Angular components life cycle.