title: Read object field from observable using async pipe
body: <p><strong>I want to gain a better understanding of when to use the async pipe in Angular.</strong></p>
  
  <p>I love the idea of having data appear asynchronously to the view by simply adding a pipe that subscribes to the data.</p>
  
  <p>However, I have only ever seen and properly applied the async pipe on network request, or some other custom observable, that contains either an array of data or a single field (like an observable string).</p>
  
  <p><strong>For example:</strong></p>
  
  <blockquote>
    <p>Lets say I make an API call that returns an array of college students.</p>
  </blockquote>
  
  <pre><code>// This data is within a network response
  $students = ...get...map... 
  [
    {
      name: "Bob OConnel",
      id: 0,
      description: "young..."
    },
    {
      name: "Rick Luckard",
      id: 3,
      description: "young..."
    },
    {
      name: "James Wing",
      id: 2,
      description: "young..."
    }
  ]
  </code></pre>
  
  <blockquote>
    <p>This could be displayed in a template like so:</p>
  </blockquote>
  
  <pre><code>&lt;tr *ngFor="let student of $students | async"&gt;
    &lt;td&gt;{{student.id}}&lt;/td&gt;
    &lt;td&gt;{{student.name}}&lt;/td&gt;
    &lt;td&gt;{{student.description}}&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>However, given the ole REST API philosophy. I have yet to ever make a production  API call that returns just an array of data. There are always fields on the same level as the array of data. But they're there for a reason, I dont want to simply throw those extra fields away in a Mapping.</p>
  
  <blockquote>
    <p>So instead of $students being an array, it would become:</p>
  </blockquote>
  
  <pre><code>// This data is within a network response
  $students = ...get...map... 
  {
    id: "69asdkasdkljasd6969"
    href: "someURLrepresentingTheDatasOrigins"
    length: 3
    items: [
      {
        name: "Bob OConnel",
        id: 0,
        description: "young..."
      },
      {
        name: "Rick Luckard",
        id: 3,
        description: "young..."
      },
      {
        name: "James Wing",
        id: 2,
        description: "young..."
      }
    ]
  }
  </code></pre>
  
  <p>So this means that in the template, I can throw an async pipe on the $students observable, but not on the fields within it.</p>
  
  <blockquote>
    <p>This obviously doesnt work, because the fields within the observables
    are observables:</p>
  </blockquote>
  
  <pre><code>{{$students.id| async}}
  // or
  &lt;tr *ngFor="let student of $students.items | async"&gt;...&lt;/tr&gt;
  </code></pre>
  
  <p>So, does that mean that on network responses like that, I should map the values of the response out into their own individual observables if I want to asynchronously bind to them in a template? Is there any way around that if I dont want the network response to split into a million smaller objects (Or in the case of my example: {id, length, href} and {items}).</p>
  
  <p>It feels as if I am missing something obvious about the usage of observables that would clear up this issue for me. Let me know if my question is not clear enough.</p>
  
  <p><strong>UPDATE</strong>
  I found something i didnt know I could do here: <a href="https://toddmotto.com/angular-ngif-async-pipe" rel="noreferrer">https://toddmotto.com/angular-ngif-async-pipe</a></p>
  
  <p>Super helpful for situations where some sort of loading indicator should be in the place of async data. It also works to consolidate subscriptions into one place. That would be a matter of preference, but I think in many of my situations I would prefer to throw the subscription into an *ngIf. </p>
  
  <p>Unless you can do that same <em>else</em> template logic into an *ngFor..?</p>