title: using variables from async operation in an angular template
body: <p>so am trying to basically get user details after they login, but am facing issues due to request to get the details taking so long.. It breaks everything. I am not exactly sure, but I believe it's due to the variable being undefined the moment of the template being loaded... What can I do to avoid that?</p>
  <pre><code>onLogin() {
      if (this.loginPassword === '' || this.loginUsername === '') {
        return false;
      }
      this.loading = true;
      this.auth.login(this.loginUsername, this.loginPassword)
        .subscribe((res: any) =&gt; {
          // Store the access token in the localstorage
          localStorage.setItem('access_token', res.access_token);
          this.auth.getUserData().subscribe((ele) =&gt; {
            console.log(ele, 'ele');
          });
          this.loading = false;
          // Navigate to home page
          this.router.navigate(['/']);
        }, (err: any) =&gt; {
          // This error can be internal or invalid credentials
          // You need to customize this based on the error.status code
          this.loading = false;
          this.error = true;
        });
    }
  </code></pre>
  <p>my Login function, after it navigates to the dashboard that's when everything goes south...</p>
  <pre><code>  getUserData(): Observable&lt;any&gt; {
      return this.http.get(this.globals.baseAPIUrl + 'details', this.cf.requestOptions()).pipe(
        map(res =&gt; res)
      );
    }
  </code></pre>
  <p>The function I use to get the user details, which takes so long and messes everything up...</p>
  <pre><code>this.auth.getUserData().subscribe((ele) =&gt; {
        this.globals = ele;
      });
  </code></pre>
  <p>How am getting the values for the dashboard and saving them</p>
  <pre><code>&lt;div class=&quot;page-title-heading&quot;&gt;
        &lt;div class=&quot;page-title-icon&quot; style=&quot;height: 150px; width: 130px;&quot;&gt;
          &lt;img src=&quot;{{ globals.userPhoto }}&quot; alt=&quot;Raised image&quot; class=&quot;img-fluid rounded card-img-top-img shadow-lg&quot;
            style=&quot;height: auto;&quot;&gt;
        &lt;/div&gt;
        &lt;div&gt;
          {{ globals.userName }}
          &lt;div class=&quot;page-title-subheading&quot;&gt;
            {{ globals.designation }}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>This is how am calling them in the HTML template</p>
  <pre><code>Cannot read property 'userPhoto ' of undefined
  </code></pre>
  <p>I keep getting this error though, any help would be great...
  Thanks in advance!</p>