title: Angular: Async Await- EventListener inside a promise
body: <p>I've been struggling since a day on this issue.
  I want to create this kind of situation:</p>
  <pre><code>&lt;img [src]=&quot;userdp | async&quot; /&gt;
  </code></pre>
  <p>in component.ts file I want to have this line only:</p>
  <pre><code>this.userdp = this._userService.getUserDp();
  </code></pre>
  <p>in the getUserDp(), here's the code:</p>
  <pre><code>async getUserDp() {
      return await
      this._http.get(APIvars.APIdomain+'/'+APIvars.GET_USER_DP,  { responseType: 'blob' }).toPromise().then( image =&gt; {
          if(image['type'] === 'application/json') {
            return null;
          }
          const reader = new FileReader();
          reader.addEventListener('load', () =&gt; {
             **return this._dom.bypassSecurityTrustResourceUrl(reader.result.toString());**
          });
          }, false);
          if (image) {
            reader.readAsDataURL(image);
          }
      });
    }
  </code></pre>
  <p>Promise is not waiting for the reader to load in EventListener, any immediate return statement gives the intended result, the line in bold is the main data to be returned.</p>
  <p>Thanks</p>