title: angular how to await subscribe
body: <p>I am newbie regarding Angular applications. I don't understand exactly how <code>subscribe</code> works. My current blocker is that I don't understand why the <code>console.log(&quot;B&quot;)</code> is executed before the <code>console.log(&quot;A&quot;)</code>, consequently presenting the result of an empty array (see the links to <code>console</code> output).</p>
  <p>I tried to put all the code in a function with <code>async/await</code> to wait for the function.  I don't understand why it doesn't work.</p>
  <p>What is the best way in this case to wait for a subscription?</p>
  <p>The <code>console.log(&quot;B&quot;)</code> must be executed after the <code>console.log(&quot;A&quot;)</code>.</p>
  <pre><code>this._roleService.getRoleTypes(this.token).subscribe(
      response =&gt; {
          if(response.status != &quot;error&quot; &amp;&amp; response.code != 400){
              let _roleTypes:Array&lt;RoleType&gt; = new Array&lt;RoleType&gt;(); 
              _roleTypes = new Array&lt;RoleType&gt;();
              response.data.forEach(rt =&gt; {
                  let roleType:RoleType = new RoleType(
                      rt.id,
                      rt.name
                  );
                  _roleTypes.push(roleType);
              });
              console.log(&quot;A&quot;);
              console.log(_roleTypes);
              this.roleTypes = _roleTypes;
          }
          else{
              this._loginService.destroySession();
          }
      },error =&gt; {
          this.errorMessage = &lt;any&gt;error;
          if(this.errorMessage != null){
              console.log(this.errorMessage);
              alert(&quot;Petition Error&quot;);
          }
      }
  );
  console.log(&quot;B&quot;);
  console.log(this.roleTypes);
  </code></pre>
  <ul>
  <li><a href="https://i.stack.imgur.com/z4vaU.png" rel="noreferrer">code</a></li>
  <li><a href="https://i.stack.imgur.com/nSVIQ.png" rel="noreferrer">console</a></li>
  </ul>