Why doesn't the value change to false in AuthGuard?

Question

JavaScript

Depending on the value of the "this.loggedInService.isLoggedIn" variable, the "AppComponent" template switches between the "logIn()" and "logout()" methods, which are subscribed to these methods in the "LoggedinService" service in the "AppComponent" component. " and, depending on the method, change the value of the variable to true or false. Also in the guard method "checkLogin(url: string)" I return true or false depending on the value of the variable "this.loggedInService.isLoggedIn". When I start the application, I can't enter the module, when I click enter, I can, but when I click exit, I can still enter the module. How to make the switch in "checkLogin" work
AppComponent.html:

<li class="nav-item">
                <a class="btn btn-outline-success"
                   [class.btn-outline-success]="!this.loggedInService.isLoggedIn"
                   [class.btn-outline-danger]="this.loggedInService.isLoggedIn"
                   (click)="this.loggedInService.isLoggedIn ? logout() : logIn()">
                    {{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
                </a>
            </li>

AppComponent.ts

export class AppComponent implements OnInit {

    constructor(public loggedInService: LoggedinService,
                public router: Router) {}

    ngOnInit() {}

    logIn(): void {
        this.loggedInService.login().subscribe(() => {
            if (this.loggedInService.isLoggedIn) {
                let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
                    '/gallery';
                this.router.navigate([redirect]);
            }
        });
    }

    logout(): void {
        this.loggedInService.logout();
    }
}

loggedinservice:

export class LoggedinService {
    isLoggedIn: boolean = false;
    redirectUrl: string;

    constructor() {}

    login(): Observable<boolean> {
        return of(true).pipe(
            delay(100),
            tap(val => this.isLoggedIn = true)
        );
    }

    logout(): boolean {
        return this.isLoggedIn = false;
    }
}

AuthGuard:

export class AuthGuard implements CanActivate {
    constructor(private loggedInService: LoggedinService, private  router: Router) {
    }

    canActivate(next: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if (this.loggedInService.isLoggedIn) {
            return true;
        } else {
            this.loggedInService.redirectUrl = url;
            return false;
        }
        }
}

Answer 1

The problem is not entirely clear. Need a sandbox. I tried to build your example. https://stackblitz.com/edit/angular-toster1 , but still did not understand what is needed.