show username in header

src/app/shared/components/header/header.component.html

@@ -44,10 +44,10 @@
       <div class="d-flex align-items-center">
 
         <div class="d-none d-lg-inline-block me-3">
-          <label class="text-muted fw-normal mb-0" 
+          <label class="text-muted fw-normal mb-0 " 
                  [title]="mismatchedDates" 
                  [style]="{'color': dateColor}" 
-                 style="font-size: 14px;">
+                 style="font-size: 14px;" >
             {{'date' | translate}}: {{date}}
           </label>
         </div>
@@ -60,7 +60,7 @@
                   aria-haspopup="true"
                   [attr.aria-expanded]="isDropdownVisible ? 'true' : 'false'">
             <img class="rounded-circle header-profile-user" src="assets/images/user-icon.png" alt="user-icon" />
-            <span class="d-none d-xl-inline-block ms-2 text-muted">{{username}}</span>
+            <span class="d-none d-xl-inline-block ms-2 fw-sm">{{username}}</span>
             <i class="mdi mdi-chevron-down text-muted d-xl-inline-block font-size-22"></i>
           </button>
           

src/app/shared/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, Inject, PLATFORM_ID } from '@angular/core';
+import { Component, HostListener, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SidebarService } from '../../../services/sidebar.service';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
@@ -12,7 +12,7 @@ import { AuthenticationService } from '../../../services/authenticate.service';
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss'
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit{
   isDropdownVisible: boolean;
   isVacDropdownVisible: boolean;
   isNotificationsVisible: boolean;
@@ -25,9 +25,9 @@ export class HeaderComponent {
     },
   ];
   direction: string = 'ltr';
-  userString;
-  user;
-  username;
+  user: any;
+  userObj: any;
+  username : string = '';
   mismatchedDates: string = "";
   dateColor = "black";
   date: any;
@@ -42,9 +42,6 @@ export class HeaderComponent {
     this.isDropdownVisible = false;
     this.isVacDropdownVisible = false;
     this.isNotificationsVisible = false;
-    this.userString = this.storageService.getItem('user');
-    this.user = JSON.parse(this.userString as string);
-    this.username = this.user?.username;
     this.date = new Date().toISOString().split('T')[0];
   }
   ngOnInit(): void {
@@ -57,6 +54,8 @@ export class HeaderComponent {
         this.storageService.setItem('sidebarState', isCollapsed ? 'expanded' : 'collapsed');
       }
     }
+    this.userObj = JSON.parse(this.storageService.getItem('user') || '{}');
+    this.username = this.userObj?.user?.userFullname ?? '';
   }
 
   ngAfterViewInit(): void {