how to get user name by using api angular

Question

in my project i have login page that allows me to access the menu dashboard as shown by the code, in the menu dashboard i have icon with text welcome james the name of the user, so all i need that when i login with email and password i want in the menu dashboard to get the name of user connected for example welcome james.

the code :

login code 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.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(['']);
  }
}

component.html :

<nav class="menu">
    <ol>
        <li class="menu-item"><a href="#0">Home</a></li>
        <li class="menu-item"><a routerLink="adherents">Adherents</a></li>
        <li class="menu-item">
            <a routerLink="factures">Factures</a>
            <ol class="sub-menu">
                <li class="menu-item"><a href="#0">Suivi</a></li>
            </ol>
        </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">LougOut</a></li>
            </ol>
        </li>
    </ol>
</nav>
<router-outlet></router-outlet>

auth.service.ts :

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

@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();
  }
  
}

api.service.ts :

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  baseUrl = 'http://localhost:3000/';

  constructor(private _http: HttpClient) { }

  getTypeRequest(url) {
    const headers = new HttpHeaders().set('Content-Type','application/json');
    return this._http.get(`${this.baseUrl}${url}`, {headers}).pipe(map(res => {
      return res;
    }));
  }
  postTypeRequest(url, payload) {
    const headers = new HttpHeaders().set('Content-Type','application/json');
    return this._http.post(`${this.baseUrl}${url}`, payload, {headers}).pipe(map(res => {
      return res;
    }));
  }

}