angular - why the observable item value isn't being displayed in html template -

i have created simple list-details sample angular4. in details page couldn't display item details has observable type class. copying below code block.

@component({   selector: 'app-user-detail',   template: `   <h2>user details</h2>   <div *ngif="user$ | async user; else elseblock">       <h3>{{user$.name.first }}</h3>       <p>       <button (click)="goback()">back</button>       </p>   </div>   <ng-template #elseblock>undefined data</ng-template>   `,   styleurls: [ './user-detail.component.css' ] }) export class userdetailcomponent implements oninit {   user$: observable<user>;    constructor(     private userservice: userservice,     private route: activatedroute,     private location: location   ) {}    ngoninit(): void {      this.user$ = this.route.parammap       .switchmap((params: parammap) => this.userservice.getuser(params.get('email')));      // .subscribe(function(x) { console.log(x); });    }    goback(): void {     this.location.back();   } } 

when check user$ object following code block can see in console log retrieves user data successfully.

  this.route.parammap       .switchmap((params: parammap) => this.userservice.getuser(params.get('email')));       .subscribe(function(x) { console.log(x); });  

but couldn't display user data on html template.

it's because, inside h3, refer user$ property, observable.

you need use local variable, user, instead:

<div *ngif="user$ | async user; else elseblock">     <h3>{{ user.name.first }}</h3> <!-- use user here, not user$ -->     <p>     <button (click)="goback()">back</button>     </p> </div>