I would like to output an the data returned from an observable, but it seems not working: : 

Am working in Angular and the problem seems to be: When I subscribe to the observable in my component, I can console.log() the data successfully, but I cannot assign the data to any afore declared variables and view it in the view template. This is the code: I understand that logging in the console is a synchronous process while the observable subscription in itself is asynchronous, but outputting a value from an asynchronous operation in the view template seems to be the problem. I have seen quite a number of solutions on stack overflow but it does not resolve the problem since it doesn't address this kind of problem. 
**This is a sample of the code**
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

      //The getData function returns an obsverbale
      favoriteShirt;
      
      const gtc = this;
      gtc.getData().subscribe({
              next: (data) => { 
                console.log(data.favShirtFromStore) // this returns an objects with the shirts (this is a sync op)
                return gtc.favoriteShirt = data.favShirtFromStore; //this returns undefined <= where the problem is
               },
               error:(err)=>{console.log(`There was an error ${err}`)},
               complete:()=>{console.log("Completed...")}
            });;

<!-- end snippet -->


