From the /ClientApp/app/components/navmenu/ folder, open the navmenu.component.ts file and update it in the following way:

import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    constructor(public auth: AuthService) {
    }
}

This will give us access to the authService instance (obtained through DI), which we can use to determine whether the current user is logged in or not.

Right after that, open the navmenu.component.html template file and change its content accordingly:

[...]

<li *ngIf="!this.auth.isLoggedIn()"
    [routerLinkActive]="['link-active']">
    <a [routerLink]="['/login']">
        <span class='glyphicon glyphicon-log-in'></span> Login
    </a>
</li>
<li *ngIf="this.auth.isLoggedIn()"
    [routerLinkActive]="['link-active']">
    <a [routerLink]="['/quiz/create']">
        <span class='glyphicon glyphicon-plus'></span> Create a Quiz
    </a>
</li>

[...]

What we did here was to use a couple of *ngIf directives to selectively show or hide our content depending on whether the currently active user is logged in or not. More specifically, we don't want to display the Login link to an already logged-in user, and we also want to prevent anonymous users from accessing the Create a Quiz view.

While we are here, we can take the chance to give our logged-in users the chance to log out by adding a dedicated Logout button in the following way:

[...]

<li *ngIf="this.auth.isLoggedIn()">
    <a (click)="logout()">
        <span class='glyphicon glyphicon-log-out'></span> Logout
    </a>
</li>

[...]

We can put that <li> element anywhere within the unordered list; however, the most logical place would be just below the sibling element hosting the Login button link. Once done, we need to go back to the navmenu.component.ts file and add an appropriate method to handle the newly-added logout feature:

import { Component } from '@angular/core';
import { Router } from "@angular/router";
import { AuthService } from '../../services/auth.service';


@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent {
    constructor(
        public auth: AuthService,
        private router: Router
    ) {
    }

    logout(): boolean {
        // logs out the user, then redirects him to Home View.
        if (this.auth.logout()) {
            this.router.navigate([""]);
        }
        return false;
    }
}

By looking at the highlighted code, we can see how we also had to retrieve the Router class (as always, through DI) to be able to redirect the logged-out user back to the Home view.