title: Async pipe cannot be found when passing to child component
body: <p>I am trying to pass a variable to a child component in congruence with the async pipe. I can display that data with the pipe and it works fine. However, when I try to pass the data, there is an error.</p>
  
  <pre><code>ERROR Error: Uncaught (in promise): Error: The pipe 'async' could not be found!
  </code></pre>
  
  <p>Error: The pipe 'async' could not be found!</p>
  
  <p>Component view</p>
  
  <pre><code>&lt;!-- CONTENT --&gt;
  &lt;div class="content"&gt;
  
      {{(userInfo | async)?.data()}}   // This works fine if the below is not included
  
      &lt;mat-tab-group dynamicHeight="true"
                     style="width:60%; margin:0px 20%;"&gt;
  
  
          // This produces an error
          &lt;mat-tab label="Bio"&gt;
              &lt;profile-about [userData]='userData' [userInfo]='userInfo | async'&gt;&lt;/profile-about&gt;
          &lt;/mat-tab&gt;
  
          &lt;mat-tab label="Companies"&gt;
              &lt;profile-companies [userData]='userData' [userInfo]='userInfo | async'&gt;&lt;/profile-companies&gt;
          &lt;/mat-tab&gt;
  
      &lt;/mat-tab-group&gt;
  
  &lt;/div&gt;
  &lt;!-- / CONTENT --&gt;
  </code></pre>
  
  <p>I have seen this done in <a href="https://blog.angular-university.io/angular-reactive-templates/" rel="nofollow noreferrer">articles</a> and it seems simple. There is some discussion that another module - the commonModule needs to be included but that makes little sense to me.</p>