<ul class="matches">
    <li class="match" *ngFor="let match of matches">
        <div class="top" (click)="match.toggleState()">
            ... content of top
        </div>
        <div class="bottom" [@slideToggle]="match.getState()">
           ... content of bottom
        </div>
    </li>
 </ul>

export const slideToggle =
    // trigger name for attaching this animation to an element using the [@triggerName] syntax
   trigger('slideToggle', [
      state('closed', style({ height: 0 })),
      state('open',   style({ height: '*' })),
      transition('closed => open', animate('250ms ease-in')),
      transition('open => closed', animate('250ms ease-out'))
    ]);

this.matches.sort((a: any, b: any) => {
    if (a.getModel().elapsed_time < b.getModel().elapsed_time) {
      return 1;
    } else if (a.getModel().elapsed_time > b.getModel().elapsed_time) {
      return -1;
    } else {
      return 0;
    }
  });