I want the selected tab stays selected after I reload the page, but this wont happen.

In The first image, I’m in the second tab which displays itself in the URL and in the navbar, This is before refreshing the page.

And in the second image I reloaded the page the the URL is the same but the tab display is gone.

Things I’ve tried:

• I tried to do the clicks in the clickSpecificTab function as you can see but it does not work and i have no tab display when the page is reloaded, unless i click on them.
• I also tried adding .active class to the <a> tags manually in the clickSpecificTab function for each switch case, the class is added to the tag but i have no display of the tabs unless I click on them.

This is my html:

<ul class="nav nav-pills dashboard-tabs" role="tablist">
          <li class="nav-item me-2">
            <a #homeTabRef  (click)="onTabChange(1)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#home" role="tab">Home</a>
          </li>
          <li class="nav-item me-2">
            <a #geologyTabRef (click)="onTabChange(2)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#geology"
              role="tab">Geology</a>
          </li>
          <li class="nav-item me-2">
            <a #drillingTabRef (click)="onTabChange(3)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#drilling"
              role="tab">Drilling</a>
          </li>
          <li class="nav-item me-2">
            <a #mudTabRef (click)="onTabChange(4)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#mud" role="tab">Mud</a>
          </li>
          <li class="nav-item me-2">
            <a #settingsTabRef (click)="onTabChange(5)" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" data-bs-toggle="tab" data-bs-target="#settings"
              role="tab">Settings</a>
          </li>
         
        </ul>

And this is my typescript:

import { AuthService } from '@app/core/services/auth.service';
import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { UnitService } from '@app/shared/services/unit.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { TabsEnum } from '@app/shared/enums/TabEnum';
import { brandSet } from '@coreui/icons';

@Component({
  selector: 'app-header-dashboard',
  templateUrl: './header-dashboard.component.html',
  styleUrls: ['./header-dashboard.component.css']
})
export class HeaderDashboardComponent implements OnInit, AfterViewInit{
  @ViewChild('homeTabRef') homeTab: ElementRef<HTMLElement>;
  @ViewChild('geologyTabRef') geologyTab: ElementRef<HTMLElement>;
  @ViewChild('drillingTabRef') drillingTab: ElementRef<HTMLElement>;
  @ViewChild('mudTabRef') mudTab: ElementRef<HTMLElement>;
  @ViewChild('settingsTabRef') settingsTab: ElementRef<HTMLElement>;

  activeTab: number = 1;
  @Input() sidebarId: string = "sidebar";
  public newMessages = new Array(4)
  public newTasks = new Array(5)
  public newNotifications = new Array(5)
  constructor(private router: Router,
    private authService: AuthService,
    private activatedRoute: ActivatedRoute
  ) { }

  ngOnInit(): void {
    const storedActiveTab = sessionStorage.getItem('activeTab');
    if (storedActiveTab) {
      this.activeTab = parseInt(storedActiveTab, 10);
      this.clickSpecificTab(this.activeTab);
    } else {
      this.activeTab = 1; 
      sessionStorage.setItem('activeTab', this.activeTab.toString());
    }
  }

  ngAfterViewInit(): void {
   
  }
  

  onTabChange(tab: TabsEnum){
    this.activeTab = tab;
    this.setRouterTotabIndex();
  }

  setRouterTotabIndex(){
    sessionStorage.setItem('activeTab', this.activeTab.toString());
    this.router.navigate([], {
      relativeTo: this.activatedRoute,
      queryParams: {
        activeTab: this.activeTab
      },
      queryParamsHandling: 'merge',
      skipLocationChange: false
    });
  }

  onClickLockAccount() {
    sessionStorage.clear();
    this.authService.logout();
  }

  
  clickSpecificTab(activeTab: number) {
    console.log(activeTab);
      switch (activeTab) {
       case 1:
        {
    
         this.homeTab.nativeElement.click();
         break;
        }
       case 2: {
        this.geologyTab.nativeElement.click();
        break;
       }
       case 3: {
        this.drillingTab.nativeElement.click();
        break;
       }
       case 4: {
        this.mudTab.nativeElement.click();
        break;
       }
       case 5: {
        this.settingsTab.nativeElement.click();
        break;
       }
    
       default:
        break;
      }
     }

}