title: ERROR TypeError: Cannot read property 'length' of undefined angular animation
body: <p>I'm trying to put <strong>angular animation</strong> at one of my users list. the list is created by <strong>FOR Loop(*ngFor)</strong>. Before the loop i use my trigger <code>[@listAnimation]="usersList.length"</code>.
  the animation is working fine, But it gives an 
  ERROR : <code>ERROR TypeError: Cannot read property 'length' of undefined</code>
  to the Console. Why?</p>
  
  <p><strong>My HTML :</strong></p>
  
  <pre><code>&lt;div class="container" [@listAnimation]="usersList.length"&gt;
    &lt;h1 class="h1 text-center mt-4" id="sectionHead"&gt;Users List&lt;/h1&gt;
  
    &lt;div *ngFor = "let user of usersList | paginate: { itemsPerPage: 4, currentPage: p}"&gt;
      &lt;div class="row mb-2 mx-auto" id="showUserList"&gt;
  
        &lt;div class="col-sm-2 p-0 text-center"&gt;
  
          &lt;img *ngIf="!user.avatar == ''" src="{{photoBaseUrl}}/{{user.avatar}}" class="img-thumbnail" alt="user image" id="profilePic1"&gt;
          &lt;img *ngIf="user.avatar == ''" src="{{photoBaseUrl}}/usergroup.png" class="img-thumbnail" alt="user image" id="profilePic2"&gt;
          &lt;div class="overlay"&gt;
            &lt;p class="addPicText" routerLink="/uploadProfilePic/{{user._id}}"&gt;
              &lt;i class="far fa-user addPhIcon"&gt;&lt;/i&gt;
              &lt;br&gt; 
              Update
            &lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-7"&gt;
          &lt;div class="card-body py-0"&gt;
            &lt;h5 class="card-title text-capitalize my-0 pt-1"&gt;{{user.name}}&lt;/h5&gt;
            &lt;p class="card-text text-muted p-0 m-0 font-sm"&gt;Email : {{user.email}}&lt;/p&gt;
            &lt;p class="card-text text-muted p-0 m-0 font-sm"&gt;Phone : {{user.phone}}&lt;/p&gt;
            &lt;p class="card-text text-muted p-0 m-0 text-capitalize font-sm"&gt;Active : {{user.active}}&lt;/p&gt;         
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="col-sm-3 pr-0 mr-0"&gt;
          &lt;div class="w-75 mx-auto mt-2 text-uppercase"&gt;
            &lt;p 
              routerLink="/editUser/{{user._id}}" 
              class="btn btn-outline-primary btn-block btnStyleSuccess font-xs m-0 p-1 mb-1"&gt;
              &lt;i class="far fa-edit"&gt;&lt;/i&gt; 
              Update
            &lt;/p&gt;
            &lt;p 
              (click)="openConfDialog(user._id)" 
              class="btn btn-outline-primary btn-block btnStyleDanger font-xs m-0 p-1"&gt;
              &lt;i class="far fa-trash-alt"&gt;&lt;/i&gt; 
              Delete
            &lt;/p&gt;
          &lt;/div&gt;        
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
    &lt;div class="text-center text-white mt-4"&gt;
      &lt;pagination-controls class="userListPagination" (pageChange)="p =$event"&gt;&lt;/pagination-controls&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My Animation Trigger :</strong> </p>
  
  <pre><code>export let listAnimation =  trigger('listAnimation', [
          transition('* =&gt; *', [
  
          query(':enter', style({ opacity: 0 }), {optional: true}),
  
          query(':enter', stagger('50ms', [
              animate('300ms ease-in', keyframes([
                style({opacity: 0, transform: 'translateX(-30%)', offset: 0}),
                style({opacity: .5, transform: 'translateX(0)',  offset: 0.3}),
                style({opacity: 1, transform: 'translateX(0)',     offset: 1.0}),
          ]))]), {optional: true}),
  
          query(':leave', stagger('50ms', [
              animate('300ms ease-out', keyframes([
                style({opacity: 1, transform: 'translateX(0)', offset: 0}),
                style({opacity: .5, transform: 'translateX(0)',  offset: 0.3}),
                style({opacity: 0, transform: 'translateX(-30%)',     offset: 1.0}),
              ]))]), {optional: true})
      ])
    ]);
  </code></pre>