title: Angular animate query incorrectly returning zero elements
body: <p>I'm working on an Electron app using Angular, and the main page is supposed to display a list of items which are loaded asynchronously from a JSON file.</p>
  
  <p>They load and animate fine, but in order to stagger their animation, I call angular animate's Query function.</p>
  
  <p>Unfortunately, this query returns zero elements, despite the fact that they successfully load almost immediately, with the correct animation (just not staggered).</p>
  
  <p>I suspect this has something to do with the query firing before the data is loaded, but I'm not sure what I can do to resolve that.</p>
  
  <p>The relevant code is included below.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div [@itemList]="itemService.items.length"&gt;
    &lt;div class="item-card" *ngFor="let item of itemService.items | 
    async;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Component:</p>
  
  <pre><code>@Component({
      selector: 'app-notes-list',
      templateUrl: './notes-list.component.html',
      styleUrls: ['./notes-list.component.css'],
      animations: [
          trigger('items', [
              transition(':enter', [
                  style({ transform: 'scale(0.5)', opacity: 0 }),  // initial
                  animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                      style({ transform: 'scale(1)', opacity: 1 }))  // final
              ]),
              transition(':leave', [
                  style({ transform: 'scale(1)', opacity: 1, height: '*' }),
                  animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
                      style({
                          transform: 'scale(0.5)', opacity: 0,
                          height: '0px', margin: '0px'
                      }))
              ])
          ]),
          trigger('itemList', [
              transition(':enter', [
                  query('.item-card', stagger(3000, animateChild()))
              ]),
          ])
      ]
  })
  export class NotesListComponent implements OnInit {
  
      constructor(private itemService: ItemService) { }
  
      ngOnInit() {
          this.getItems();
      }
  
      getItems(): void {
          this.itemService.getItems();
      }
  }
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>@Injectable()
  export class ItemService {
  
      items: Subject&lt;Item[]&gt;;
      itemDataStore: Item[];
  
      constructor(private electronService: ElectronService,
          private zone: NgZone) {
  
          this.items = new Subject&lt;Item[]&gt;();
  
          this.electronService.ipcRenderer.on('sending-items', (event, args) =&gt; {
              this.itemDataStore = args;
              this.zone.run(() =&gt; {
                  console.log('Got data');
                  this.items.next(this.itemDataStore);
              });
          });
      };
  
      getItems(): Observable&lt;Item[]&gt; {
          this.electronService.ipcRenderer.send('get-items');
          return this.items.asObservable();
      }
  }
  </code></pre>