title: Angular Observable<Model> object is always empty
body: <p>I am trying to assign value received from get request to a model object in angular. However the object is always empty. Following is my code, what am I doing wrong?</p>
  <p><strong>Model class</strong></p>
  <pre><code>export class UserModel{
   username:string='';
   displayName:string='';
  }
  </code></pre>
  <p><strong>home.component.ts class</strong></p>
  <pre><code>constructor(private service:UserService){
   this.getUser();
  }
  
  getUser(){
   this.service.getUserModel('johnp').subscribe(res =&gt; this.user = res as UserModel);
    // **THIS OBJECT IS STILL EMPTY**
    console.log(this.user)  
  }
  </code></pre>
  <p><strong>user.service.ts class</strong></p>
  <pre><code>getUserModel(username:string):Observable&lt;UserModel&gt;{
   return this.http.get&lt;UserModel&gt;(this.url+'/getUser/'+username)
    .pipe(
      map(usermodel=&gt;{
       return usermodel
      }),
     catchError(this.handleError)
    );
   }
  
  private handleError(error:HttpErrorResponse){
   console.log(error);
  }
  </code></pre>