Navbar po udanym logowaniu

Cześć zrobiłem logowanie po stronie angulara i wygląda to tak:

import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor() {}

  loggedIn(): boolean {
    const status = !!localStorage.getItem('token');
    return status;
  }

  logout() {
    localStorage.removeItem('token');
  }

  getName() {
    return jwt_decode(localStorage.getItem('token')).unique_name;
  }
}

import { Component, OnInit, Input } from '@angular/core';

import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { Subject } from 'rxjs';
import { UserService } from 'src/app/core/api-services/user-api.service';
import { Router } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  constructor(private authService: UserService, private formBuilder: FormBuilder, private route: Router) {}

  modelForm: FormGroup;
  validate: Subject<void> = new Subject<void>();
  error = false;

  ngOnInit() {
    this.modelForm = new FormGroup({
      username: new FormControl(),
      password: new FormControl()
    });
  }

  registerUser() {
    console.log(this.modelForm.value);
    this.modelForm.markAllAsTouched();

    if (this.modelForm.valid === true) {
      this.authService.login(this.modelForm.value).subscribe(
        (res: any) => {
          localStorage.setItem('token', res.payload);
          this.route.navigate(['/home']);

          console.log(res.payload);
        },
        error => {
          this.error = true;
        }
      );
    }
  }
}

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {
  isLogged: boolean;
  constructor(private auth: AuthService) {}
  userName: string;
  ngOnInit() {
    if (this.auth.loggedIn()) {
      this.isLogged = true;
      this.userName = this.auth.getName();
    } else {
      this.isLogged = false;
    }

    console.log(this.isLogged);
  }

  logout() {
    this.auth.logout();
  }
}

<nav class="navbar navbar-expand-lg navbar-dark"
     name="top"
     id="navbar">
    <a class="navbar-brand"
       href="#"><span class="logo">WORK.<span class="logoRight">PL</span></span></a>
    <button class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse"
         id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="/home"
                   [routerLinkActive]="'activeLink'">Strona Główna
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   [routerLink]="['/tenure/tenureList', 1]"
                   [routerLinkActive]="'activeLink'">
                    Oferty Pracy
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="company/companyCard"
                   [routerLinkActive]="'activeLink'">
                    Pracodawcy
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="/admin/adminPanel"
                   [routerLinkActive]="'activeLink'">
                    Panel Admina
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="calculator"
                   [routerLinkActive]="'activeLink'">
                    Kalkulator wynagrodzeń
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="cv/createCv"
                   [routerLinkActive]="'activeLink'"
                   *ngIf="isLogged">
                    Kreator CV
                </a>
            </li>
            <li class="nav-item active">
                <a class="nav-link"
                   routerLink="userProfile"
                   [routerLinkActive]="'activeLink'"
                   *ngIf="isLogged">
                    Twój Profil
                </a>
            </li>
        </ul>
        <a routerLink="/tenure/tenurePromotion"
           class="mr-5 addOffer"><i class="fas fa-plus-circle mr-1"></i> Dodaj ogłoszenie</a>
        <button class="button btn-register"
                *ngIf="!isLogged"
                routerLink="register">Zarejestruj się</button>
        <li class="nav-link"
            *ngIf="isLogged">Witaj, {{userName}}</li>
        <button class="button"
                *ngIf="!isLogged"
                routerLink="login">Zaloguj się</button>
        <button class="button"
                *ngIf="isLogged"
                (click)="logout()">Wyloguj się</button>
    </div>
</nav>

Dopiero się uczę dlatego wygląda to tak prymitywnie :) Mam pytanie jak mogę zrobić aby po zalogowaniu i przeniesiueniu na stronę główną na navabr ukazał się button logout oraz imię użytkownika bo teraz muszę odswieżyć aby się zmienił a można to zrobić bez odswieżania strony ? :)

Bo sprawdzasz to w ngOnInit() w komponencie navbar. A to ten komponent po zalogowaniu nie jest niszczony. Proponuje uzyć Subject'a w AuthService do propagowania stanu zalogowania/wylogowania na komponenty.