title: How to use an observable without subcribe in Angular
body: <p>I have an Angular 8 application and I am using a API call like this:</p>
  
  <pre><code>getDossierEntry(patientUUID: string,   type: String = '' ): Observable&lt;DossierEntry[]&gt; {
    const entryType = type === '' ? 'all' : 'type/' + type;
    return this.http.get&lt;DossierEntry[]&gt;(`${this.baseUrl}/${patientUUID}/DossierEntry/` + entryType);
  }
  
  </code></pre>
  
  <p>And I have a parent component like this:</p>
  
  <pre><code>export class DossierCorrespondenceComponent implements OnInit {
  
    correspondenceEntries$: Observable&lt;DossierEntry[]&gt;;
  
    @Input() allCorrespondence: Array&lt;DossierEntry&gt;;
    @Input() correspondenceEntries: Array&lt;DossierEntry&gt;;
    @Input() attachmentEntries: Array&lt;DossierEntry&gt;;
  
    message = '';
    emptyMessageCorrespondentie = 'Geen correspondentie.';
    errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
  
    correspondenceLoaded = false;
  
    showingSingle = false;
  
    single: DossierEntry;
  
    constructor(
      private documentCorrespondeceService: DocumentCorrespondenceService,
  
      private authService: AuthService  ) {}
  
    ngOnInit() {
  
      this.authService.loginStatus().subscribe(user =&gt; {
        const UUID = user.profile.participant;
  
      this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result =&gt; {
          this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
        }, () =&gt; (this.message = this.errorMessageConnection));
      });
    }
  
  
     handleCorrespondenceLoad(result: any) {
      if (result.length === 0) {
        this.message = this.emptyMessageCorrespondentie;
        return;
      }
      this.allCorrespondence = result;
      this.attachmentEntries = [];
      this.correspondenceEntries = [];
  
      const groups = _.groupBy(result, 'type');
      this.correspondenceEntries = groups.correspondence;
      this.attachmentEntries = groups.attachments;
    }
  }
  </code></pre>
  
  <p>And the html template looks like this:</p>
  
  <pre><code>&lt;app-vital10-page [noTopBar]="true"&gt;
    &lt;h2 class="dossier-page-header"&gt;Correspondentie&lt;/h2&gt;
  
    &lt;p class="data-entry" *ngIf="!allCorrespondence"&gt;{{ message }}&lt;/p&gt;
    &lt;app-is-loading *ngIf="!correspondenceLoaded" message="Correspondentie wordt geladen"&gt;&lt;/app-is-loading&gt; 
  
    &lt;app-dossier-correspondence-list [correspondenceEntries] = "correspondenceEntries$ | async" &gt;&lt;/app-dossier-correspondence-list&gt;
    &lt;app-dossier-correspondence-item
      [item]="single"
      (goBack)="goBack($event)"
      *ngIf="showingSingle"&gt;
    &lt;/app-dossier-correspondence-item&gt;
  &lt;/app-vital10-page&gt;
  
  </code></pre>
  
  <p>Then I have an child component like this:</p>
  
  <pre><code>export class DossierCorrespondenceListComponent implements OnInit {
  
    @Input()
    correspondenceEntries: DossierEntry[];
  
    @Input() showingSingle;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>and the template looks like this:</p>
  
  <pre><code>
  &lt;div *ngIf="!showingSingle  &amp;&amp; correspondenceEntries &amp;&amp; correspondenceEntries.length &gt; 0;"&gt;
    &lt;div class="main-row main-row-dossier"&gt;
      &lt;section class="data-entry"&gt;
        &lt;h3 class="dossier-header"&gt;Algemeen&lt;/h3&gt;
        &lt;table class="dossier-table" *ngIf="correspondenceEntries  else loadingCorrespondenceEntires "&gt;
          &lt;thead class="dossier-tableheader"&gt;
            &lt;tr&gt;
              &lt;th class="dossier-tablehead fixed-one-fifth"&gt;Datum&lt;/th&gt;
              &lt;th class="dossier-tablehead fixed-four-fifths"&gt;Onderwerp&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class="dossier-tablebody"&gt;
            &lt;tr class="dossier-correspondencerow" *ngFor="let entry of correspondenceEntries; let i = index" (click)="gotoItem(i, entry.type)"&gt;
              &lt;td&gt;{{ entry.date | date:"dd-MM-y" }}&lt;/td&gt;
              &lt;td&gt;{{ entry.name }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/section&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ng-template #loadingCorrespondenceEntires&gt;
    &lt;div&gt;..Loading &lt;/div&gt;
  &lt;/ng-template&gt;
  
  
  </code></pre>
  
  <p>But now the data of the child component is not visible in the Parent component. But The correct data is loaded. Because If I do a console.log on this :</p>
  
  <pre><code> this.correspondenceEntries = groups.correspondence;
      this.attachmentEntries = groups.attachments;
  </code></pre>
  
  <p>I see the correct arrays.But not in the view(htm file)</p>
  
  <p>The problem is with this:</p>
  
  <pre><code>correspondenceEntries$: Observable&lt;DossierEntry[]&gt;;
  
  </code></pre>
  
  <p>So my question is , how to pass the observable with this:</p>
  
  <pre><code> this.authService.loginStatus().subscribe(user =&gt; {
        const UUID = user.profile.participant;
  
      this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result =&gt; {
          this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
        }, () =&gt; (this.message = this.errorMessageConnection));
      });
    }
  </code></pre>
  
  <p>So that you dont have to use the subscribe method:</p>
  
  <pre><code>.subscribe(result =&gt; {
          this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
        }, () =&gt; (this.message = this.errorMessageConnection));
  </code></pre>
  
  <p>And that you will see the data in the view</p>
  
  <p>Thank you.</p>
  
  <p>So I want to do this:</p>
  
  <pre><code>ngOnInit() {
  
      this.authService.loginStatus().subscribe(user =&gt; {
        const UUID = user.profile.participant;
  
   this.correspondenceEntries$ =   this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence').subscribe(result =&gt; {
          this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
        }, () =&gt; (this.message = this.errorMessageConnection));
      });
    }
  
  </code></pre>
  
  <p>But of course that doesn't work. But I don't know how to do it others?</p>
  
  <p>So this is the output:</p>
  
  <pre><code>dossier-corresponden…ist.component.ts:21 
  {correspondenceEntries: SimpleChange}
  correspondenceEntries: SimpleChange
  currentValue: null
  firstChange: true
  previousValue: undefined
  </code></pre>
  
  <p>oke, if  I do this:</p>
  
  <pre><code>&lt;app-vital10-page [noTopBar]="true"&gt;
    &lt;h2 class="dossier-page-header"&gt;Correspondentie&lt;/h2&gt;
  
    &lt;p class="data-entry" *ngIf="!allCorrespondence"&gt;{{ message }}&lt;/p&gt;
  
  
  &lt;ng-container *ngIf="(correspondenceEntries$ | async) as correspondenceEntries"&gt;
  
    &lt;app-dossier-correspondence-list [correspondenceEntries]="correspondenceEntries" &gt;&lt;/app-dossier-correspondence-list&gt;
  
  &lt;/ng-container&gt;
  
  
    &lt;app-dossier-correspondence-item
      [item]="single"
      (goBack)="goBack($event)"
      *ngIf="showingSingle"&gt;
    &lt;/app-dossier-correspondence-item&gt;
  &lt;/app-vital10-page&gt;
  </code></pre>
  
  <p>then still no output in view. But I get this in console:</p>
  
  <pre><code>(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  </code></pre>
  
  <p>But I see this:</p>
  
  <pre><code>currentValue: null
  </code></pre>
  
  <p>But if I do this:</p>
  
  <pre><code>ngOnInit() {
  
      console.log(this.correspondenceEntries$);
  
      this.authService.loginStatus().subscribe(user =&gt; {
        const UUID = user.profile.participant;
  
    this.correspondenceEntries$ =    this.documentCorrespondeceService.getDossierEntry(UUID, 'correspondence')
      });
    }
  </code></pre>
  
  <p>Then I see the items in the view.</p>
  
  <p>But so I removed all this:</p>
  
  <pre><code>.subscribe(result =&gt; {
          this.handleCorrespondenceLoad(result), (this.correspondenceLoaded = true);
        }, () =&gt; (this.message = this.errorMessageConnection));
  
  </code></pre>
  
  <p>So is this correct?</p>
  
  <p>No, this is not correct. Because now it will be one big list. ANd not two seperated lists(arrays)</p>