how to get username of the current logged user with local storage in angular typescript

Question

I have an Angular app where user can login with his email and password. so I need when current user connected to show his name in the menu dashboard like welcome james, as showing in (app.component.html) by using localStorage. I get all the information from a data base mysql.

code :

login.component.html :

<h1 style="text-align:center">
  <img src="../../assets/images/logo.png">
</h1>
<div class="login-wrap">
  <div class="login-html">

    <div class='login'>
      <div class='col-md-4 offset-4 mt-5' *ngIf='!this.isLogin'>
        <h2 class="login-header">S'identifier</h2>
        <form class="login-container" #myform="ngForm" (ngSubmit)="onSubmit(myform)">
          <div class='form-group'>
            <input class='form-control' type="email" name="email" placeholder="email" ngModel>
          </div>

          <div class='form-group'>
            <input class='form-control' type="password" name="password" placeholder="Password"
              [type]="hide ? 'password': 'text'" [(ngModel)]="passwordValue">
            <span class="material-icons" matSuffix (click)="hide = !hide">
              {{hide ? 'visibility': 'visibility_off'}}
            </span>
          </div>
          <input class='btn btn-outline-info' type="submit" value="Login">
        </form>
      </div>
      <div class='col-md-4 offset-4 mt-5' *ngIf='this.isLogin'>

        <h1>You are logged in</h1>
        <button class='btn btn-outline-info' (click)='logout()'>Log-out</button>

      </div>
    </div>
  </div>
</div>

login.component.ts :

export class LoginComponent implements OnInit {
  isLogin: boolean = false
  errorMessage: any
  hide =true;
  passwordValue='';

  constructor(
    private _api: ApiService, 
    private _auth: AuthService, 
    private _router:Router,  private toastr : ToastrService) { }

  ngOnInit(){
    this.isUserLogin(); 
  }
  
  onSubmit(form: NgForm) {
    
    console.log('Your form data : ', form.value);
    this._api.postTypeRequest('user/login', form.value).subscribe((res: any) => {
     
      switch (res.status) {
        case 0:
            this.toastr.error("you have a problem","Erreur");
            break;
        case 1:
            this._auth.setDataInLocalStorage('userData', JSON.stringify(res.data));  
            this._auth.setDataInLocalStorage('token', res.token);  
            this._router.navigate(['']);
            break;
        case 2:
            this.toastr.warning("your email or password is incorrect","Warning");
            this.passwordValue = '';
            break;
    }
    })
  }

  isUserLogin(){
    if(this._auth.getUserDetails() != null){
        this.isLogin = true;
    }
  }

  logout(){
    this._auth.clearStorage()
    this._router.navigate(['']);
  }
}

app.component.html (menu) :

<nav class="menu">
    <ol>
        <li class="menu-item"><a routerLink="adherents">Adherents</a></li>
        <li class="menu-item">
            <a routerLink="factures">Factures</a>
        </li>
        <li class="menu-item">
            <a routerLink="logs">Logs</a>
        </li>
        <li class="menu-item">
            <a routerLink="regions">Regions</a>
        </li>
        <li class="menu-item">
            <a routerLink="roles">Roles</a>
        </li>
        <li class="menu-item">
            <img class="img" src="../assets/images/user.png">
            <a>welcome james</a>
            <ol class="sub-menu">
                <li class="menu-item"><a routerLink="/login">LogOut</a></li>
            </ol>
        </li>
    </ol>
</nav>
<router-outlet></router-outlet>

auth-guard.service.ts :

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

  constructor( private _authService: AuthService,
    private _router: Router) { }

    canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if (this._authService.getToken()) {
        return true;
      }
     
      this._router.navigate(['/login']);
      return false;
    }
    
}

auth.service.ts:

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

  constructor() { }


  getUserDetails() {
    if(localStorage.getItem('userData')){
      return localStorage.getItem('userData')
    }else{
      return null
    }
    
  }
  setDataInLocalStorage(variableName, data) {
      localStorage.setItem(variableName, data);
  }
  getToken() {
      return localStorage.getItem('token');
  }
  clearStorage() {
      localStorage.clear();
  }
  
  
}

Answer 1

On your app.component.ts you can create a variable in which you get the userData and you make this variable .userName

import { Component } from '@angular/core';

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'cgem';
    user:any;
    constructor(){}
    ngOnInit() {
    //I forgot that you have to try to recover the user in the ngOnit. 
        try{
           this.user= JSON.parse(localStorage.getItem("userData"));
        }catch(error){}    
    }

   //after 
    
 }  

And on your app.component.html you can call user

...
<img class="img" src="../assets/images/user.png">
<a>welcome {{user.name}}</a>
<ol class="sub-menu">
...