как отобразить имя пользователя логина и изменить опцию входа в систему для выхода

Question

Здесь я хочу показать имя пользователя, вошедшего в систему, вверху и изменить параметр входа на выход. У меня есть идея, что это можно сделать с помощью локального хранилища сессии. Bt я застрял в логике.

<div fxLayout="row wrap">
        <div fxFlex="50" fxFlex.gt-sm="50" class="p-2" ngClass.sm="mt-2" ngClass.xs="mt-2">
            <h2 class="text-muted text-center">Sign in here!</h2>
            <form class="form-signin" (ngSubmit)="onLoginFormSubmit()" #loginForm="ngForm">
                    <div class="alert alert-warning alert-dismissible" role="alert" *ngIf="message !== ''">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            {{message}}
                          </div>
            <mat-form-field class="w-100 mt-1">
                <input matInput placeholder="Email" [(ngModel)]="loginData.useremail" name="useremail" required>
                <mat-error *ngIf="loginForm.controls.useremail.errors?.required">Full Name is required</mat-error>
                <mat-error *ngIf="loginForm.controls.useremail.hasError('minlength')">Full Name isn't long enough, minimum of 3 characters</mat-error>
           </mat-form-field>
            <mat-form-field class="w-100 mt-1">
                <input matInput placeholder="Password" [(ngModel)]="loginData.password" name="password" type="password" minlength="6" required>
                <mat-error *ngIf="loginForm.controls.useremail.errors?.required">Full Name is required</mat-error>
                <mat-error *ngIf="loginForm.controls.useremail.hasError('minlength')">Full Name isn't long enough, minimum of 3 characters</mat-error>          
           </mat-form-field> 

            <div class="text-center mt-2">
                <button mat-fab color="primary" class="mat-elevation-z6" [disabled]="!loginForm.form.valid">
                    <mat-icon>person_add</mat-icon>
                </button>
            </div>
            <p align="center">
                    Don't have an account? Sign up now! <a [routerLink]="['/sign-up']">Signup here</a>
                </p>
        </form>
          </div>
          </div>