title: Combining Input/Service Data in Component
body: <p>I have an angular component which gets data from an @Input variable and uses this to filter additional data from a service. The (simplified) structure looks like this:</p>
  
  <pre><code>&lt;phones-component&gt;
   &lt;phone-details&gt;
    &lt;..&gt;
    &lt;phone-history-component [phoneNumber$]="phoneNumber$"&gt;&lt;/phone-history-component&gt;
   &lt;phone-details&gt;
  &lt;/phones-component&gt;
  </code></pre>
  
  <p>PhoneDetailsComponent:</p>
  
  <pre><code> changeLogs$: Observable&lt;AuditLog[]&gt;;
  
   constructor(
     private auditLogService: AuditLogService, //ngrx-data service
   ){
  
    ngOnInit(): void {
        this.changeLogs$ = combineLatest([this.phoneNumber$, this.auditLogService.entities$])
             .pipe(
                   map(pn =&gt; pn[1].filter(logs =&gt; logs.pkId === pn[0].id))); //filters the logs to show only log entries from the corresponding phonenumber
     }
  </code></pre>
  
  <p>The routes are configured like this: </p>
  
  <pre><code>{
    path: 'phones',
    component: PhonesComponent,
  },
  {
    path: 'phones/:id',
    component: PhoneDetailsComponent,
  },
  </code></pre>
  
  <p>Everything works as expected as long as I 'enter' the PhoneDetailsComponent from the parent container. When the user manually reloads the PhoneDetails View, the changeLogs$ array is empty, UNLESS I manually inject a property of the unwrapped observable like this:</p>
  
  <pre><code>  &lt;phone-history-component [phoneNumberId]="(phoneNumber$ | async).id" [phoneNumber$]="phoneNumber$"&gt;&lt;/phone-history-component&gt;
  </code></pre>
  
  <p>If I just inject the phoneNumber$ like this </p>
  
  <pre><code>[phoneNumber]="(phoneNumber$ | async)"
  </code></pre>
  
  <p>it doesn't work. (I don't use these additional inputs in the component)</p>
  
  <p>Now I know that there are other ways to implement this functionality, but I'm merely interested in why the code behaves like this?</p>
  
  <p>It feels like I'm lacking some fundamental understanding of the basic rxjs pipeline.
  So..what is happening here exactly? </p>
  
  <p>Any help is appreciated.</p>
  
  <p><strong><em>UPDATE</em></strong>
  BizzyBob was kinda right. When directly reloading the component, the <code>phoneNumber$</code> Observable didn't have any value when the <code>filter</code>function got fist executed. I fixed this with a quick check:</p>
  
  <pre><code>  map(pn =&gt; {
          return !!pn[0] ? pn[1].filter(logs =&gt; logs.pkId === pn[0].id) : null;
        }));
  </code></pre>
  
  <p>Now.. is this the recommended way to do it, or are there better ways?</p>