title: How to extract data from SafeSubscriber?
body: <p>I have to make an Angular application in which i <strong>get data from the back-end and display it on the front-end</strong>, but with some added hard-coded data.</p>
  <p>My communication is between 2 files:</p>
  <p><strong>client.service.ts</strong></p>
  <pre><code>import { Injectable } from '@angular/core';
  import {HttpClient, HttpHeaders} from &quot;@angular/common/http&quot;;
  import {environment} from &quot;../environments/environment&quot;;
  import {catchError, map, Observable, of} from &quot;rxjs&quot;;
  
  const clientUrl = environment.apiUrl+'client';
  
  @Injectable({providedIn: 'root'})
  
  export class ClientService {
  
    public optional: any;
    constructor(private http: HttpClient) {}
  
    getText(): Observable&lt;any&gt; {
      console.log(&quot;it works!&quot;);
      return this.http.get(clientUrl+&quot;/getText&quot;).pipe(map(res =&gt; {
          console.log(res);
          this.optional = res.toString();
      }));
    }
  }
  </code></pre>
  <p>and the second one:
  <strong>client.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {ClientService} from &quot;../client.service&quot;;
  
  @Component({
    selector: 'app-client',
    templateUrl: './client.component.html',
    styleUrls: ['./client.component.css']
  })
  export class ClientComponent implements OnInit {
  
    public textResponse: any;
    constructor(public service: ClientService) {}
    ngOnInit(): void {}
  
    getText() {
      let text: any;
      this.textResponse = this.service.getText().subscribe();
  
  
      console.log(this.textResponse);
      text = this.textResponse + &quot;This text is added from code.&quot;;
      console.log(text);
    }
  }
  </code></pre>
  <p>When i call &quot;<em>this.http.get(clientUrl+&quot;/getText&quot;)</em>&quot; I get a SafeSubscriber object, from which i managed to get the data displayed in  the console using the method &quot;<em>.subscribe(...)</em>&quot; with a &quot;<em>console.log()</em>&quot; inside of it. However, i did not find any method to extract the data out of this subscribe.</p>
  <p>As the code above shows, i have tried to use pipe and map, but the local variable is returned as [Object object], and when i print it in the console i get either undefined, either nothing.</p>
  <p>This is what my code currently displays:</p>
  <pre><code>it works! [client.service.ts:33]
  SafeSubscriber {initialTeardown: undefined, closed: false, _parentage: null, _finalizers: Array(1), isStopped: false, …} [client.component.ts]
  [object Object]This text is added from code. [client.component.ts]
  {text: 'This text is read from a file.'} [client.service.ts]
  </code></pre>
  <p>I have also tried all the suggestions found in questions below:
  <a href="https://stackoverflow.com/questions/39295854/angular-2-how-to-return-data-from-subscribe">angular 2 how to return data from subscribe</a>
  <a href="https://stackoverflow.com/questions/60593725/angular-observable-retrieve-data-using-subscribe">Angular observable retrieve data using subscribe</a></p>
  <p>Does anyone know a method in which i could get the data out of the Subscribe?</p>