How to interpolate nested objects from Get request in Angular 6?

Question

I have a service that has a get request to get a response, and I logged it to the console. It is a object with one field and one nested object, like this:

 { success: true, user { (_id, username, email) } } 

I want to place it on the html like this:

<li class="list-group-item">Username: {{username?.user?.username}}</li>
<li class="list-group-item">Email: {{email?.user?.email}}</li>

account.component.ts:

 ngOnInit() {
this.auth.getProfile().subscribe(profile => {
  this.username = profile.user.username;
  this.email = profile.user.email;
  console.log(profile)
})
}

The account route on the backend returns a user object. However the problem is that the html is empty. Anyone has a suggestion?

Answer 1

I put some info under comments but here is the solution:

<li class="list-group-item">Username: {{username}}</li>
<li class="list-group-item">Email: {{email}}</li>