refresh header component after login using angular 11

Question

actually i am using angular 11 and i want to show username in header component but my header is load first then my login component is load so after loading login component data store in local storage that why when i refresh page then user name is show but i dont want refresh page so what can i do for that please help me

below code is my authservice

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment'
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  baseUrl = environment.apiUrl;

  constructor(private http: HttpClient, private router: Router) { }
  loginUser(data: {}) {
    return this.http.post(this.baseUrl + 'signin', data)
  }

  isLoggedIn() {
    //console.log(localStorage.getItem('user_details'))
    if (localStorage.getItem('user_details') !== undefined && localStorage.getItem('user_details') !== null) {
      //console.log("if")
      return true;
    } else {
      return false;
    }
    //return !!localStorage.getItem('user_details')
  }
  getUserName(): any {
    const userName = localStorage.getItem('user_details');
    if (userName) {
      return JSON.parse(userName);
    }
    return false;
  }
  isLoggedOut() {
    localStorage.removeItem('user_details');
    this.router.navigate(['/login']);
  }
}

this is my header component

import { Component, OnInit, HostListener } from '@angular/core';
import { AuthService } from '../../login/services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  scrolled: boolean = false;
  userName: string = '';
  fname: string = '';
  lname: string = "";

  @HostListener("window:scroll", [])
  onWindowScroll() {
    this.scrolled = window.scrollY > 1;
  }
  constructor(public auth: AuthService, private router: Router) { }

  ngOnInit(): void {
    if (this.auth.isLoggedIn()) {
      this.router.navigate(['dashboard']);
    }
    const user = this.auth.getUserName();
    this.userName = user.role_name;
    this.fname = user.first_name.charAt(0);
    this.lname = user.last_name.charAt(0);
  }

  logOut() {
    localStorage.removeItem('user_details');
    this.router.navigate(['/login']);
  }
}

below is login component

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AuthService } from './services/auth.service';
import { Router } from '@angular/router';
import { Md5 } from 'md5-typescript';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  loginForm: any;
  data: any;
  success: any;
  message: any;

  constructor( private auth: AuthService, private router: Router ) {

    this.loginForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.pattern('^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$')]),
      password: new FormControl('', Validators.required)
    });
    
  }

  ngOnInit(): void { }

  onSubmit() {
    console.log(this.loginForm.value);
    let data = {
      "email_id": this.loginForm.value.email,
      "password": Md5.init(this.loginForm.controls['password'].value)
    }
    this.auth.loginUser(data).subscribe(
      (response: any) => {
        this.data == response;
        this.success == response.success;
        if (response.success == 1) {
          localStorage.setItem("user_details", JSON.stringify(JSON.parse(response.data).user_details))
          console.log(localStorage.getItem('user_details'));
          this.router.navigate(['dashboard']);
        } else {
          this.message = response.message;
        }
      }
    );
    this.loginForm.reset();
  }
}

Answer 1

You can't use local storage to get logged in user details, because you component is already loaded. You need to create shared service using Subject or Behaviorsubject (RXJS operatoer) You can find example https://medium.com/@hitensharma1515/sharing-data-between-components-using-service-2d662a653a89