title: Returning Item from promise in Custom Angular Pipe
body: <p>I built a custom pipe to return a string:</p>
  
  <pre><code>transform(value: string, arg?: any): any {
    if(this.result == null){return null;}
    return this.vs.GetById(value).then((variant) =&gt; {
       this.result = variant[arg];
    }).finally(() =&gt; {
    return this.result;
   })
  }
  </code></pre>
  
  <p>I call it like this:</p>
  
  <pre><code>{{ variant.id | getProductVariant: (name$ | async) }}
  </code></pre>
  
  <p>The service that the pipe calls looks like:</p>
  
  <pre><code>GetById(id) {
          let promise = new Promise((resolve, reject) =&gt; {
              this.http.get(this.base_url+'v2/variations/'+id, this.options).toPromise().then(res =&gt; {
                  var results = res['data'];
                  resolve(results);
              }, msg =&gt; {
                  reject(msg);
              });
          });
          return promise;
      }
  </code></pre>
  
  <p>However, It only returns <code>[object Promise]</code> instead of <code>name</code> in this example. What am I missing?</p>