Search code examples
angulargetrequestangular6string-interpolation

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

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?

Solution

  • 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>