It seems to be a very simple task. I've written the code and it is working also. But there is a small issue. First let me show you the code:

**navbar.component.ts**

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  currentUserFirstname="";
  currentUserLastname="";

  constructor() {
  }

  ngOnInit() {
    this.currentUserFirstname=localStorage.getItem('firstname');
    this.currentUserLastname=localStorage.getItem('lastname');
  }
}

```

**navbar.component.html**

```
<span class="current-user">{{currentUserFirstname}} {{currentUserLastname}}</span>

```

I just want to display the current logged in user which I've to fetch from storage. The problem is that, it is never displayed first time. See, after the green circle there's nothing:
[![enter image description here](https://i.stack.imgur.com/D1CIr.png)](https://i.stack.imgur.com/D1CIr.png)

But when I refresh the page once. The values appear. See:
[![enter image description here](https://i.stack.imgur.com/R6InG.png)](https://i.stack.imgur.com/R6InG.png)

I tried using `setTimeout()` but it didn't work:

```
ngOnInit() {
    setTimeout(function(){
      this.currentUserFirstname=localStorage.getItem('firstname');
      this.currentUserLastname=localStorage.getItem('lastname');
   }, 2000);
  }

```

Please help me. I need help making the code synchronous for this task.