title: How to properly chain Dependent Async Pipes in Angular
body: <p>I have 3 async pipes in my code.</p>
  
  <pre><code>&lt;div&gt;{{formatedData$ | async}}&lt;/div&gt;
  
  &lt;div&gt;{{totalStatusData$ | async }}&lt;/div&gt;
  
  &lt;div&gt;{{totalPercentageData$ | async}}&lt;/div&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <p>Actual Data Returned From Service As Follows</p>
  
  <pre><code>[{
          "name": "one",
          "steps": [{
                  "id": 1,
                  "passed": 1,
                  "failed": 3
              },
              {
                  "id": 2,
                  "passed": 4,
                  "failed": 0
              }
          ]
      },
      {
          "name": "two",
          "steps": [{
                  "id":3 ,
                  "passed": 10,
                  "failed": 3
              },
              {
                  "id": 4,
                  "passed": 4,
                  "failed": 8
              }
          ]
      }
  ]
  
  this.formatedData$ = this.service.data().pipe(map(data) =&gt; {
  
  return this.formatData1();
  
  })
  </code></pre>
  
  <p><strong>now this.formatedData$ is follows</strong></p>
  
  <pre><code>[{
          "name": "one",
          "passed": 5,
          "failed": 3
      },
      {
          "name": "two",
          "passed": 14,
          "failed": 11
      }
  ]
  
  this.totalStatusData$=this.formatedData$.pipe(map(data) =&gt; {
  return formatData2(data)
  });
  </code></pre>
  
  <p><strong>Now this.totalStatusData$ as follows</strong></p>
  
  <pre><code>    {
  
          "passed": 19,
          "failed": 14
      }
  
  $totalPercentageData = this.totalStatusData$.pipe(map(data) =&gt; {
  
  return this.formatData3(data);
  
  }) 
  </code></pre>
  
  <p><strong>Now $totalPercentageData as follows</strong></p>
  
  <pre><code>{
  
          "passed": "57.57%",
          "failed": "42.42%"
      }
  </code></pre>
  
  <p>How can i chain these Observables into One instead of One without breaking the Observable chain, starting  from Actual Service Data.</p>