Отобразить строку sesstionStorage в представлении HTML Angular 8?

Question

Я просто хочу отобразить данные, которые я сохранил в sessionStorage, в моем угловом представлении.

My sesstionStorage:

sessionStorage.getItem('username');

Мой файл dashboard.ts:

export class DashboardComponent implements OnInit {
  currentUserSubscription: Subscription;

  constructor(private authenticationService: AuthenticationService){

  }

  ngOnInit() {

  }
}

Мой HTML-файл:

<div *ngIf = "username">
          <p class="introText"><b>Welkom:</b> {{ username }}
            <button mat-button (click)="clockIn()" class="mat-raised-button mat-primary clockButton">
              Inklokken
            </button>
            <button mat-button type="submit" class="mat-raised-button mat-basic">
              Uitklokken
            </button> <br> 
            <b>Ingelogd: </b>{{dateTime}}
      </div>

Answer 1

файл dashboard.ts:

export class DashboardComponent implements OnInit {
  username: string;

  constructor(private authenticationService: AuthenticationService){}

  ngOnInit() {
   this.username = this.authenticationService.getUsername();
  }
}

authentication.service.ts

@Injectable({
  providedIn: 'root'
})
export class AuthenticationService{
   getUsername():string {
      return sessionStorage.getItem('username');
   }
}

Answer 2

export class DashboardComponent implements OnInit {
  username;

  constructor(private authenticationService: AuthenticationService){

  }

  ngOnInit() {
    this.username = sessionStorage.getItem('username');
  }
}

и

<p class="introText"><b>Welkom:</b> {{ username }}