title: Subscribing to Observer then outputting the response to console returns undefined
body: <p>When i subscribe to an API Endpoint provided by a service in an Angular Component, I cannot access the valus from the observable in my typescript code, I can however see them in HTML.</p>
  
  <p><strong>role.service.ts</strong></p>
  
  <pre><code>getAllRoles() {
      return this.http.get&lt;Role[]&gt;(`${environment.privateApiUrl}/Role/Get`);
  }
  </code></pre>
  
  <p><strong>app-component.component.ts</strong></p>
  
  <pre><code>  roles: Role[];
  
    ngOnInit(): void {
  
      this.roleService.getAllRoles().subscribe(data =&gt; {
        this.roles = data
      })
  
      console.log(this.roles) &lt;-- Returns undefined
    }
  </code></pre>
  
  <p>If I call roles in my HTML however, I can see all the values. if I call console.log inside the subscribe, I can see the values. </p>
  
  <p>How do I get access to this object in Typescript after i've subscribed to it?</p>
  
  <p>Thanks</p>