Unable To Show Username In Angular

i have implemented authentication using jwt tokenization and after login I want to display username on the navbar, but it is not showing anything and giving error on console 'ERROR

Solution 1:

Try using safe navigation operator or *ngIf since you are making a request to your API and getting the data asynchronously. Try as follows,

   <a  ngbDropdownToggle class="nav-link dropdown-toggle"id="dropdown01" data-toggle="dropdown" aria-haspopup="true"  aria-expanded="false">{{ user$?.username }}</a>

Solution 2:

I'm pretty sure this happen to you because you're trying to access user$.username when username property doesn't exist. To avoid that error you can use a defined type and then initialize, eg.

public $user: UserInterface = {
    username: ''
}

or whether you don't want to use defined types, just add an extra validation to html block using ngIf, eg.

<a  *ngIf="user$.username" ngbDropdownToggle class="nav-link dropdown-toggle"id="dropdown01" data-toggle="dropdown" aria-haspopup="true"  aria-expanded="false">{{ user$.username }}</a>

btw, as a good coding practice, use public method declaration for methods that are shared between code and view, aot build will thanks to you.