How to display a navbar component after logging in without reloading the page in angular 12

My landing page does not show a navbar, but I want to display a navbar after logging in successfully. Currently, I'm able to show navbar if I do a full page reload after logging in successfully. I'm very sure that there is a better way than this approach.

---

app.component.html

<app-navbar></app-navbar>
<router-outlet></router-outlet>

---

login.component.ts

login(){
    this.credentials = this.myForm.value;
    if(this.credentials){
      this.loginService.authenticate(this.credentials)
      .subscribe(data => {
        this.storageService.setLocalStorageItem('auth', JSON.stringify(data));
        this.dataService.global.showNav = true;
        this.sharedService.getProjectMetadata()
        .subscribe(metadata => {
          this.storageService.setLocalStorageItem('projectMetaData', JSON.stringify(metadata));
          this.router.navigate(['/home']);
        })
      }, err => console.log(err));
    } else {
      console.log('Please enter your username and password');
    }
  }

---

data.service.ts

import { Injectable } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { IGlobal, IMessage } from '../../Shared/interfaces';
import { MessageCallback } from '../../Shared/types';

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

  date: string = (new Date()).toString();

  global: IGlobal = {
    showNav: false,
    sessionTimedOut: false,
    timezone: this.date.substring(this.date.indexOf('GMT')),
    projectMetaData: {
      name: ''
    },
    isAdmin: false,
    auth: {
      roles: {
        admin: false,
        developer: false
      }
    }
  }

  private handler: Subject<IMessage> = new Subject<IMessage>();

  broadcast(type: string, payload: any){
    this.handler.next({type, payload});
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler.pipe(filter(message => message.type === type), map(message => message.payload))
                        .subscribe(callback);
  }
}

---

navbar.component.html

<mat-toolbar fxLayout="row" color="primary" *ngIf='showNavbar'></mat-toolbar>

---

navbar.component.ts

export class NavbarComponent implements OnInit {
  user: IAuth = {};
  showNavbar: boolean;
  progressbar: number = 0;

  constructor(
    private storageService: StorageService,
    private dataService: DataService
  ) { 
    this.showNavbar = this.dataService.global.showNav;
  }

  ngOnInit(): void {
    this.user = JSON.parse(this.storageService.getLocalStorageItem('auth'));
    if(this.user){
      this.showNavbar = true;
    }
  }

}

Please help me out. Your help is highly appreciated. Thank you.